AI Suggested Prompts

"use client";

import React from "react";
import { Code, PenLine, Lightbulb, BarChart3 } from "lucide-react";

interface PromptSuggestion {
  title: string;
  description: string;
  icon: React.ReactNode;
  prompt: string;
}

const suggestions: PromptSuggestion[] = [
  {
    title: "Write Code",
    description: "Generate a React component",
    icon: <Code className="h-5 w-5" />,
    prompt: "Write a React component that...",
  },
  {
    title: "Creative Writing",
    description: "Draft an article or story",
    icon: <PenLine className="h-5 w-5" />,
    prompt: "Help me write a blog post about...",
  },
  {
    title: "Brainstorm Ideas",
    description: "Generate creative solutions",
    icon: <Lightbulb className="h-5 w-5" />,
    prompt: "Give me 5 creative ideas for...",
  },
  {
    title: "Analyze Data",
    description: "Interpret and visualize data",
    icon: <BarChart3 className="h-5 w-5" />,
    prompt: "Analyze the following data and...",
  },
];

interface AISuggestedPromptsProps {
  onSelect?: (prompt: string) => void;
}

export default function AISuggestedPrompts({ onSelect }: AISuggestedPromptsProps) {
  return (
    <div className="grid grid-cols-2 gap-3 max-w-lg mx-auto">
      {suggestions.map((s, i) => (
        <button
          key={i}
          onClick={() => onSelect?.(s.prompt)}
          className="flex flex-col items-start gap-2 rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 p-4 text-left hover:border-violet-300 dark:hover:border-violet-700 hover:bg-violet-50/50 dark:hover:bg-violet-950/20 transition-all group"
        >
          <div className="p-2 rounded-lg bg-zinc-100 dark:bg-zinc-800 text-zinc-600 dark:text-zinc-400 group-hover:bg-violet-100 dark:group-hover:bg-violet-900/30 group-hover:text-violet-600 dark:group-hover:text-violet-400 transition-colors">
            {s.icon}
          </div>
          <div>
            <p className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{s.title}</p>
            <p className="text-xs text-zinc-500 mt-0.5">{s.description}</p>
          </div>
        </button>
      ))}
    </div>
  );
}