Prompt Box

import { Badge, Button, Card, Textarea } from "@cooud-ui/ui";
import { ArrowUp, ChevronDown, Paperclip } from "lucide-react";

export function PromptBoxBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <div className="flex w-full max-w-xl flex-col gap-3">
        <div className="flex flex-wrap gap-2">
          <Button variant="outline" size="sm">
            Summarize
          </Button>
          <Button variant="outline" size="sm">
            Translate
          </Button>
          <Button variant="outline" size="sm">
            Write code
          </Button>
          <Button variant="outline" size="sm">
            Brainstorm
          </Button>
        </div>

        <Card className="gap-3 p-3 shadow-lg">
          <Textarea
            placeholder="Ask anything…"
            className="min-h-24 resize-none border-0 bg-transparent p-0 shadow-none focus-visible:ring-0"
          />
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-1">
              <Button variant="ghost" size="icon" aria-label="Attach file">
                <Paperclip className="size-4" aria-hidden="true" />
              </Button>
              <Button variant="ghost" size="sm" className="gap-1.5">
                <Badge variant="secondary" className="rounded-sm">
                  Cooud · Fast
                </Badge>
                <ChevronDown className="size-4" aria-hidden="true" />
              </Button>
            </div>
            <Button variant="gradient" size="icon" aria-label="Send prompt">
              <ArrowUp className="size-4" aria-hidden="true" />
            </Button>
          </div>
        </Card>
      </div>
    </div>
  );
}