src/components/ExamplePrompts.tsx

import type React from "react";
import { DEFAULT_EXAMPLES, type Example } from "../constants/examples";

interface ExamplePromptsProps {
  examples?: Example[];
  onExampleClick: (messageText: string) => void;
}

const ExamplePrompts: React.FC<ExamplePromptsProps> = ({
  examples,
  onExampleClick,
}) => (
  <div className="flex flex-col items-center justify-center h-full space-y-6">
    <div className="text-center mb-6">
      <h2 className="text-3xl font-semibold text-white mb-1">Try an example</h2>
      <p className="text-md text-[#9bb5ff]">Click one to get started</p>
    </div>

    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-4xl w-full px-4">
      {(examples || DEFAULT_EXAMPLES).map((example, index) => (
        <button
          key={index}
          onClick={() => onExampleClick(example.messageText)}
          className="group relative overflow-hidden rounded-2xl border border-white/12 bg-white/8 text-left shadow-[0_22px_55px_rgba(3,27,78,0.35)] transition-all hover:-translate-y-0.5 hover:shadow-[0_28px_65px_rgba(15,98,254,0.35)]"
        >
          <span className="pointer-events-none absolute inset-0 bg-gradient-to-r from-[#0f62fe]/25 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
          <div className="relative flex items-center gap-4 px-5 py-4">
            <span className="flex size-12 flex-shrink-0 items-center justify-center rounded-full border border-[#78a9ff]/30 bg-[#0f62fe]/15 text-xl text-[#a6c8ff] transition-all group-hover:scale-105 group-hover:bg-[#0f62fe]/25 group-hover:text-white">
              {example.icon}
            </span>
            <div className="flex flex-1 items-center">
              <span className="text-md font-medium text-white">
                {example.displayText}
              </span>
            </div>
            <span className="flex size-10 items-center justify-center rounded-full border border-white/10 bg-white/10 text-[#9bb5ff] transition-all group-hover:border-[#78a9ff]/40 group-hover:bg-[#0f62fe]/35 group-hover:text-white">
              →
            </span>
          </div>
        </button>
      ))}
    </div>
  </div>
);

export default ExamplePrompts;