import { useT } from '@/lib/i18n/react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/overlays/Dialog';
import { Button } from '@/components/ui/primitives/Button';

export interface WishlistMergeDialogProps {
  open: boolean;
  count: number;
  busy: boolean;
  onMerge: () => void;
  onDiscard: () => void;
  onDismiss: () => void;
}

export function WishlistMergeDialog({
  open,
  count,
  busy,
  onMerge,
  onDiscard,
  onDismiss,
}: WishlistMergeDialogProps) {
  const t = useT('wishlist');

  return (
    <Dialog
      open={open}
      onOpenChange={(next) => {
        if (!next) onDismiss();
      }}
    >
      <DialogContent>
        <DialogHeader>
          <DialogTitle>{t('merge.title')}</DialogTitle>
          <DialogDescription>{t('merge.body').replace('{count}', String(count))}</DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="secondary" onClick={onDiscard}>
            {t('merge.discard')}
          </Button>
          <Button variant="primary" loading={busy} onClick={onMerge}>
            {t('merge.merge')}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}