Cancel Flow

import {
  Banner,
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Label,
  RadioGroup,
  RadioGroupItem,
  Separator,
} from "@cooud-ui/ui";
import { Sparkles } from "lucide-react";

const cancelReasons = [
  { id: "reason-expensive", label: "Too expensive" },
  { id: "reason-features", label: "Missing features I need" },
  { id: "reason-switching", label: "Switching to another tool" },
  { id: "reason-usage", label: "Not using it enough" },
  { id: "reason-other", label: "Other" },
];

export function CancelFlowBlock() {
  return (
    <section aria-label="Cancel subscription" className="mx-auto w-full max-w-md">
      <Card className="shadow-md">
        <CardHeader>
          <CardTitle className="font-display text-lg">We're sorry to see you go</CardTitle>
          <p className="col-span-full text-sm text-fg-secondary">
            Help us improve — why are you cancelling?
          </p>
        </CardHeader>
        <CardContent className="flex flex-col gap-5">
          <RadioGroup
            defaultValue="reason-expensive"
            aria-label="Reason for cancelling"
            className="gap-2"
          >
            {cancelReasons.map(({ id, label }) => (
              <Label
                key={id}
                htmlFor={id}
                className="flex cursor-pointer items-center justify-between gap-3 rounded-lg border border-border bg-surface-inset px-3 py-2.5 font-normal text-fg has-[:checked]:border-primary"
              >
                {label}
                <RadioGroupItem value={id} id={id} />
              </Label>
            ))}
          </RadioGroup>
          <Banner
            variant="success"
            align="start"
            dismissible={false}
            icon={<Sparkles aria-hidden="true" />}
            title="Stay and get 30% off for the next 3 months"
            description="Apply the discount and keep everything you have today."
            action={
              <Button variant="outline" size="sm">
                Apply offer
              </Button>
            }
          />
        </CardContent>
        <Separator />
        <CardFooter className="justify-end gap-3">
          <Button variant="ghost" size="sm" className="text-error hover:text-error">
            Cancel anyway
          </Button>
          <Button variant="gradient" size="sm">
            Keep my subscription
          </Button>
        </CardFooter>
      </Card>
    </section>
  );
}