Chat Thread

import {
  Avatar,
  AvatarFallback,
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  Input,
} from "@cooud-ui/ui";
import { ArrowUp, Sparkles } from "lucide-react";

export function ChatThreadBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-md gap-0 overflow-hidden p-0 shadow-lg">
        <CardHeader className="flex flex-row items-center gap-3 border-b border-border p-4">
          <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>
          <div className="flex flex-1 items-center gap-2">
            <span className="font-medium text-sm">Cooud Assistant</span>
            <span className="size-2 rounded-full bg-success" aria-hidden="true" />
          </div>
          <Button variant="ghost" size="sm">
            Clear
          </Button>
        </CardHeader>

        <CardContent className="flex flex-col gap-4 p-4">
          <div className="flex items-start justify-end gap-2">
            <div className="max-w-[75%] rounded-2xl rounded-tr-sm bg-primary px-3 py-2 text-primary-foreground text-sm">
              How do I theme a Cooud component?
            </div>
            <Avatar className="size-7">
              <AvatarFallback>MC</AvatarFallback>
            </Avatar>
          </div>

          <div className="flex items-start gap-2">
            <span className="inline-flex size-7 shrink-0 items-center justify-center rounded-full bg-gradient-primary text-primary-foreground">
              <Sparkles className="size-3.5" aria-hidden="true" />
            </span>
            <div className="max-w-[75%] rounded-2xl rounded-tl-sm bg-surface-overlay px-3 py-2 text-sm">
              Wrap your app in CooudThemeProvider and override the design tokens you want to change.
            </div>
          </div>

          <div className="flex items-start justify-end gap-2">
            <div className="max-w-[75%] rounded-2xl rounded-tr-sm bg-primary px-3 py-2 text-primary-foreground text-sm">
              Can I do it per-route?
            </div>
            <Avatar className="size-7">
              <AvatarFallback>MC</AvatarFallback>
            </Avatar>
          </div>

          <div className="flex items-start gap-2">
            <span className="inline-flex size-7 shrink-0 items-center justify-center rounded-full bg-gradient-primary text-primary-foreground">
              <Sparkles className="size-3.5" aria-hidden="true" />
            </span>
            <div className="flex items-center gap-1 rounded-2xl rounded-tl-sm bg-surface-overlay px-3 py-3">
              <span
                className="size-1.5 rounded-full bg-fg-tertiary animate-bounce [animation-delay:0ms]"
                aria-hidden="true"
              />
              <span
                className="size-1.5 rounded-full bg-fg-tertiary animate-bounce [animation-delay:150ms]"
                aria-hidden="true"
              />
              <span
                className="size-1.5 rounded-full bg-fg-tertiary animate-bounce [animation-delay:300ms]"
                aria-hidden="true"
              />
            </div>
          </div>
        </CardContent>

        <CardFooter className="gap-2 border-t border-border p-3">
          <Input placeholder="Message Cooud Assistant…" className="flex-1" />
          <Button variant="gradient" size="icon" aria-label="Send message">
            <ArrowUp className="size-4" aria-hidden="true" />
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
}