AI Suggested Prompts

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

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

interface AISuggestedPrompts01Props {
    onPromptSelect?: (prompt: SuggestedPrompt) => void;
}

export default function AISuggestedPrompts01({
    onPromptSelect,
}: AISuggestedPrompts01Props) {
    // Self-contained prompt data
    const prompts: SuggestedPrompt[] = [
        { id: 1, text: "Explain ShadCN UI components with examples", tags: ["UI", "React"] },
        { id: 2, text: "Generate a TypeScript function for sorting arrays", tags: ["Code", "TS"] },
        { id: 3, text: "Summarize latest AI news", tags: ["AI", "Summary"] },
        { id: 4, text: "Write a friendly email template", tags: ["Writing", "Email"] },
        { id: 5, text: "Convert JSON to CSV in Python", tags: ["Code", "Python"] },
        { id: 6, text: "Create a workout plan for beginners", tags: ["Health", "Plan"] },
    ];

    return (
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            {prompts.map((prompt) => (
                <Card
                    key={prompt.id}
                    className="p-0 cursor-pointer hover:bg-muted"
                    onClick={() => onPromptSelect?.(prompt)}
                >
                    <CardContent className="p-4 flex flex-col gap-2">
                        <span className="text-sm font-medium">{prompt.text}</span>
                        {prompt.tags && (
                            <div className="flex flex-wrap gap-1">
                                {prompt.tags.map((tag) => (
                                    <Badge key={tag} variant="outline" className="text-xs">
                                        {tag}
                                    </Badge>
                                ))}
                            </div>
                        )}
                    </CardContent>
                </Card>
            ))}
        </div>
    );
}