AI Assistant

import { Card, CardContent, CardHeader, CardTitle } from "./components/ui/card"
import { Input } from "./components/ui/input"
import { Button } from "./components/ui/button"
import { Send, Bot, User } from "lucide-react"

export default function AIAssistant() {
  const messages = [
    { role: "assistant", content: "Hello! I'm your DS assistant. How can I help you explore the design system today?" },
    { role: "user", content: "Show me the Card component examples" },
    { role: "assistant", content: "Sure — here are a few Card examples with different header, content, and footer layouts. Cards respect the active theme so they re-skin when you switch from Ramp to Paper." },
    { role: "user", content: "How do I define a custom theme?" },
    { role: "assistant", content: "A theme is a ThemeInput object — three hues plus a handful of typography, spacing, and radius presets. The generator turns those into a full OKLCH-based palette. You can save custom themes to localStorage from the theme builder." },
  ]

  return (
    <div className="flex flex-col h-screen max-w-4xl mx-auto p-4">
      <Card className="mb-4">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Bot className="h-5 w-5 text-primary" />
            AI Assistant
          </CardTitle>
        </CardHeader>
      </Card>

      <Card className="flex-1 flex flex-col">
        <CardContent className="flex-1 overflow-y-auto p-4 space-y-4">
          {messages.map((message, i) => (
            <div
              key={i}
              className={`flex gap-3 ${message.role === "user" ? "flex-row-reverse" : ""}`}
            >
              <div className={`h-8 w-8 rounded-full flex items-center justify-center flex-shrink-0 ${
                message.role === "user" ? "bg-primary/20" : "bg-secondary"
              }`}>
                {message.role === "user" ? (
                  <User className="h-4 w-4" />
                ) : (
                  <Bot className="h-4 w-4" />
                )}
              </div>
              <div className={`rounded-lg p-3 max-w-[80%] ${
                message.role === "user"
                  ? "bg-primary text-primary-foreground ml-auto"
                  : "bg-muted"
              }`}>
                <p className="text-sm">{message.content}</p>
              </div>
            </div>
          ))}
        </CardContent>

        <CardContent className="p-4 border-t">
          <div className="flex gap-2">
            <Input placeholder="Ask about components, tokens, or themes..." />
            <Button>
              <Send className="h-4 w-4" />
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}