// @design-system: domain/VoucherCheckbox

'use client';

import { useId } from 'react';
import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';
import { Checkbox } from '@/components/ui/primitives/Checkbox';
import { LabelWithTooltip } from '@/components/ui/primitives/LabelWithTooltip';

/** Props for VoucherCheckbox */
export interface VoucherCheckboxProps {
  /** Whether the checkbox is checked. */
  checked: boolean;
  /** Called when the checked state changes. */
  onChange: (checked: boolean) => void;
  /** Additional class names. */
  className?: string;
}

/**
 * VoucherCheckbox — checkbox to flag a deal as a voucher / store credit.
 * Shows label + hint text below.
 *
 * @example
 * ```tsx
 * <VoucherCheckbox checked={isVoucher} onChange={setIsVoucher} />
 * ```
 */
export function VoucherCheckbox({ checked, onChange, className }: VoucherCheckboxProps) {
  const t = useT('vendor_add_deal');
  const id = useId();

  return (
    <div className={cn('flex flex-col gap-1', className)}>
      <div className="flex items-center gap-2">
        <Checkbox id={id} checked={checked} onCheckedChange={(val) => onChange(val === true)} />
        <LabelWithTooltip
          htmlFor={id}
          label={t('is_voucher_label')}
          tooltip={t('voucher_tooltip')}
        />
      </div>
      <p className="text-text-secondary ps-7 text-sm">{t('is_voucher_hint')}</p>
    </div>
  );
}