"use client"

import type React from "react"

import { useState } from "react"

export default function PromptToolbar({
  busy,
  onGenerate,
  onClear,
  onExample,
}: {
  busy?: boolean
  onGenerate: (prompt: string) => void
  onClear: () => void
  onExample: (text: string) => void
}) {
  const [prompt, setPrompt] = useState("Dashboard with header, sidebar, 3x2 cards grid, and footer")

  const submit = (e: React.FormEvent) => {
    e.preventDefault()
    if (!prompt.trim() || busy) return
    onGenerate(prompt.trim())
  }

  const examples = [
    "Marketing landing page with hero, 3x2 features grid, signup form, and footer",
    "Simple login screen with header and centered form",
    "Ecommerce product grid 4x2 with header, sidebar filters, and footer",
    "Admin dashboard with header, sidebar, 2x2 cards and a form",
  ]

  return (
    <div className="flex flex-col gap-3">
      <form onSubmit={submit} className="flex items-center gap-2">
        <input
          aria-label="Prompt"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="e.g., Dashboard with header, sidebar, 3x2 cards grid, and footer"
          className="flex-1 rounded-md border border-gray-300 px-3 py-2 text-sm outline-none focus:border-blue-500"
        />
        <button
          type="submit"
          disabled={busy}
          className="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 disabled:opacity-60"
        >
          {busy ? "Generating…" : "Generate"}
        </button>
        <button
          type="button"
          onClick={onClear}
          className="rounded-md border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-800 hover:bg-gray-50"
        >
          Clear
        </button>
      </form>
      <div className="flex flex-wrap items-center gap-2">
        <span className="text-xs text-gray-600">Try:</span>
        {examples.map((ex) => (
          <button
            key={ex}
            onClick={() => onExample(ex)}
            className="rounded-full border border-gray-200 bg-white px-3 py-1 text-xs text-gray-800 hover:bg-gray-50"
          >
            {ex}
          </button>
        ))}
      </div>
    </div>
  )
}
