AI Conversation Starter

"use client";

import React from "react";
import { Sparkles, ArrowRight } from "lucide-react";

const topics = [
  "Explain quantum computing in simple terms",
  "Write a poem about technology",
  "Help me debug my React code",
  "Create a meal plan for the week",
  "Summarize the latest AI research",
  "Design a database schema for an e-commerce app",
];

interface ConversationStarterProps {
  onTopicSelect?: (topic: string) => void;
}

export default function AIConversationStarter({ onTopicSelect }: ConversationStarterProps) {
  return (
    <div className="flex flex-col items-center justify-center min-h-[400px] px-4">
      <div className="mb-6 p-4 rounded-2xl bg-gradient-to-br from-violet-500/10 to-purple-500/10 dark:from-violet-500/20 dark:to-purple-500/20">
        <Sparkles className="h-10 w-10 text-violet-500" />
      </div>
      <h2 className="text-2xl font-bold text-zinc-900 dark:text-zinc-100 mb-2 tracking-tight">
        How can I help you?
      </h2>
      <p className="text-sm text-zinc-500 mb-8 text-center max-w-md">
        I can help with writing, analysis, coding, math, and much more. Start a conversation or try one of these topics.
      </p>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 w-full max-w-lg">
        {topics.map((topic, i) => (
          <button
            key={i}
            onClick={() => onTopicSelect?.(topic)}
            className="flex items-center justify-between rounded-lg border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-4 py-3 text-sm text-left text-zinc-700 dark:text-zinc-300 hover:border-violet-300 dark:hover:border-violet-700 hover:bg-violet-50/50 dark:hover:bg-violet-950/20 transition-all group"
          >
            <span className="line-clamp-1">{topic}</span>
            <ArrowRight className="h-3.5 w-3.5 text-zinc-400 group-hover:text-violet-500 transition-colors shrink-0 ml-2" />
          </button>
        ))}
      </div>
    </div>
  );
}