// @design-system: NotifyMeButton
// NotifyMeButton — subscribes/unsubscribes a logged-in user to back-in-stock alerts
// for a deal or specific SKU variant.

import { Bell, BellOff } from 'lucide-react';
import { Button } from '@/components/ui/primitives/Button';
import { useT } from '@/lib/i18n/react';

export interface NotifyMeButtonProps {
  subscribed?: boolean;
  loading?: boolean;
  variant?: 'deal' | 'sku';
  onSubscribe: () => void;
  onUnsubscribe: () => void;
}

export function NotifyMeButton({
  subscribed = false,
  loading = false,
  variant = 'deal',
  onSubscribe,
  onUnsubscribe,
}: NotifyMeButtonProps) {
  const t = useT('back_in_stock');

  if (loading) {
    return (
      <Button variant="secondary" loading disabled>
        {subscribed
          ? t('unsubscribe')
          : variant === 'sku'
            ? t('notify_me_variant')
            : t('notify_me')}
      </Button>
    );
  }

  if (subscribed) {
    return (
      <Button
        variant="ghost"
        iconStart={<BellOff size={16} aria-hidden="true" />}
        onClick={onUnsubscribe}
      >
        {t('subscribed')}
      </Button>
    );
  }

  return (
    <Button
      variant="secondary"
      iconStart={<Bell size={16} aria-hidden="true" />}
      onClick={onSubscribe}
    >
      {t(variant === 'sku' ? 'notify_me_variant' : 'notify_me')}
    </Button>
  );
}