NPS Survey

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

const NPS_SCORES = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

export function NpsSurveyBlock() {
  return (
    <div className="flex w-full items-center justify-center py-4">
      <Card className="w-full max-w-lg gap-6 shadow-lg">
        <CardHeader>
          <CardTitle className="font-display text-lg">
            How likely are you to recommend Cooud to a friend or colleague?
          </CardTitle>
        </CardHeader>

        <CardContent className="flex flex-col gap-4">
          <div className="flex flex-wrap gap-1.5">
            {NPS_SCORES.map((score) =>
              score === 9 ? (
                <button
                  type="button"
                  key={score}
                  className="size-9 rounded-lg border border-primary bg-primary text-sm font-medium text-primary-foreground"
                >
                  {score}
                </button>
              ) : (
                <button
                  type="button"
                  key={score}
                  className="size-9 rounded-lg border border-border-subtle text-sm font-medium text-fg-secondary transition-colors hover:border-primary hover:text-fg"
                >
                  {score}
                </button>
              ),
            )}
          </div>

          <div className="flex justify-between text-xs text-fg-tertiary">
            <span>Not likely</span>
            <span>Very likely</span>
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="nps-reason">What's the main reason for your score?</Label>
            <Textarea id="nps-reason" placeholder="Tell us what shaped your rating…" rows={3} />
          </div>

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