Feedback Form

import {
  Badge,
  Button,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Label,
  Rating,
  Textarea,
} from "@cooud-ui/ui";

const FEEDBACK_CATEGORIES = ["Bug", "Idea", "Praise", "Other"];

export function FeedbackFormBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-md gap-6 shadow-lg">
        <CardHeader>
          <CardTitle className="font-display text-lg">How was your experience?</CardTitle>
        </CardHeader>

        <CardContent className="flex flex-col gap-5">
          <Rating defaultValue={4} size="lg" aria-label="Overall experience" />

          <div className="flex flex-wrap gap-2">
            {FEEDBACK_CATEGORIES.map((category) =>
              category === "Idea" ? (
                <button
                  type="button"
                  key={category}
                  className="rounded-full border border-primary bg-primary/10 px-3 py-1 text-sm font-medium text-primary"
                >
                  {category}
                </button>
              ) : (
                <button
                  type="button"
                  key={category}
                  className="rounded-full border border-border-subtle px-3 py-1 text-sm font-medium text-fg-secondary transition-colors hover:border-primary hover:text-fg"
                >
                  {category}
                </button>
              ),
            )}
          </div>

          <div className="flex flex-col gap-2">
            <div className="flex items-center justify-between">
              <Label htmlFor="feedback-detail">Tell us more…</Label>
              <Badge variant="secondary">Optional</Badge>
            </div>
            <Textarea
              id="feedback-detail"
              placeholder="Share the details so we can improve…"
              rows={3}
            />
          </div>

          <Button variant="gradient" size="lg" className="w-full">
            Send feedback
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}