AI Response

import { Badge, Button, Card, CardContent, CardHeader, Separator } from "@cooud-ui/ui";
import { Copy, RefreshCw, Sparkles, ThumbsDown, ThumbsUp } from "lucide-react";

export function AiResponseBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-lg gap-4 shadow-lg">
        <CardHeader className="flex flex-row items-center gap-3">
          <span className="inline-flex size-8 items-center justify-center rounded-lg bg-gradient-primary text-primary-foreground shadow-glow">
            <Sparkles className="size-4" aria-hidden="true" />
          </span>
          <span className="flex-1 font-medium text-sm">Cooud Assistant</span>
          <Badge variant="secondary">Answer</Badge>
        </CardHeader>

        <CardContent className="flex flex-col gap-4">
          <p className="text-sm text-fg-secondary">
            Cooud UI ships themeable components built on design tokens, so you can restyle the whole
            system without touching component code. The essentials:
          </p>
          <ul className="flex list-disc flex-col gap-1.5 pl-5 text-sm text-fg-secondary">
            <li>Every color, radius, and shadow is driven by a CSS variable token.</li>
            <li>Swap a theme by overriding those tokens at any DOM scope.</li>
            <li>The CLI copies source into your repo so you stay in control.</li>
          </ul>

          <div className="flex flex-col gap-2">
            <span className="font-medium text-fg-tertiary text-xs uppercase tracking-wide">
              Sources
            </span>
            <div className="flex items-center gap-2 text-sm">
              <span className="size-5 shrink-0 rounded bg-surface-overlay" aria-hidden="true" />
              <span className="flex-1 truncate">Theming guide</span>
              <span className="text-fg-tertiary text-xs">cooud-ui.dev</span>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <span className="size-5 shrink-0 rounded bg-surface-overlay" aria-hidden="true" />
              <span className="flex-1 truncate">Design tokens reference</span>
              <span className="text-fg-tertiary text-xs">cooud-ui.dev</span>
            </div>
            <div className="flex items-center gap-2 text-sm">
              <span className="size-5 shrink-0 rounded bg-surface-overlay" aria-hidden="true" />
              <span className="flex-1 truncate">CLI: add a component</span>
              <span className="text-fg-tertiary text-xs">cooud-ui.dev</span>
            </div>
          </div>

          <Separator />

          <div className="flex items-center gap-1">
            <Button variant="ghost" size="icon" aria-label="Good response">
              <ThumbsUp className="size-4" aria-hidden="true" />
            </Button>
            <Button variant="ghost" size="icon" aria-label="Bad response">
              <ThumbsDown className="size-4" aria-hidden="true" />
            </Button>
            <Button variant="ghost" size="sm">
              <Copy className="size-4" aria-hidden="true" />
              Copy
            </Button>
            <Button variant="ghost" size="sm" className="ml-auto">
              <RefreshCw className="size-4" aria-hidden="true" />
              Regenerate
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}