AI Conversation Starter

import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";

interface SuggestedTopic {
    id: number;
    text: string;
    tags?: string[];
}

interface AIConversationStarter01Props {
    onTopicSelect?: (topic: SuggestedTopic) => void;
}

export default function AIConversationStarter01({ onTopicSelect }: AIConversationStarter01Props) {
    // Self-contained suggested topics
    const topics: SuggestedTopic[] = [
        { id: 1, text: "Explain ShadCN UI components", tags: ["UI", "React"] },
        { id: 2, text: "Generate TypeScript helper functions", tags: ["Code", "TS"] },
        { id: 3, text: "Summarize latest AI news", tags: ["AI", "News"] },
        { id: 4, text: "Create a friendly email template", tags: ["Writing", "Email"] },
    ];

    return (
        <Card className="border-0 w-full flex flex-col items-center justify-center p-6 text-center space-y-4">
            {/* AI Branding / Welcome */}
            <div className="space-y-2">
                <h2 className="text-2xl font-bold">Welcome to ChatGPT</h2>
                <p className="text-muted-foreground">
                    Start a new conversation with AI. Choose a topic below to get started.
                </p>
            </div>

            {/* Suggested Topics Grid */}
            <div className="w-[80%] grid grid-cols-1 sm:grid-cols-2 gap-3 mt-4">
                {topics.map((topic) => (
                    <Button
                        key={topic.id}
                        variant="outline"
                        className="flex flex-col items-start p-4 h-auto"
                        onClick={() => onTopicSelect?.(topic)}
                    >
                        <span className="font-medium text-sm">{topic.text}</span>
                        {topic.tags && (
                            <div className="flex flex-wrap gap-1 mt-1">
                                {topic.tags.map((tag) => (
                                    <Badge key={tag} variant="outline" className="text-xs">
                                        {tag}
                                    </Badge>
                                ))}
                            </div>
                        )}
                    </Button>
                ))}
            </div>

            {/* Optional Footer Action */}
            <Button className="mt-4">
                Start a Blank Chat
            </Button>
        </Card>
    );
}