"use client";

import Link from "next/link";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { dataConsent } from "@/content/consent";
import { cn } from "@/lib/utils";

type Props = {
  id: string;
  checked: boolean;
  onCheckedChange: (checked: boolean) => void;
  /** Defaults to standard form consent; use `payment` for checkout */
  variant?: "default" | "payment";
  className?: string;
};

export function DataConsentField({
  id,
  checked,
  onCheckedChange,
  variant = "default",
  className,
}: Props) {
  const labelPrefix =
    variant === "payment" ? dataConsent.paymentLabel : dataConsent.label;

  return (
    <div
      className={cn(
        "flex items-start gap-3 rounded-lg border border-border bg-muted/30 p-4",
        className
      )}
    >
      <Checkbox
        id={id}
        checked={checked}
        onCheckedChange={(v) => onCheckedChange(v === true)}
        className="mt-0.5"
        required
      />
      <Label htmlFor={id} className="text-sm font-normal leading-snug text-muted-foreground">
        {labelPrefix}{" "}
        <Link href="/privacy" className="font-medium text-[#37a47a] underline underline-offset-2">
          {dataConsent.privacyLinkText}
        </Link>
        .
      </Label>
    </div>
  );
}