import { Clock, X, CheckCircle2, Loader2 } from 'lucide-react';
import { cn, fmt, fmtDate } from '@/lib/utils';
import { Button } from '@/components/ui/button';

export function AutopaySuggestionActions({ row, loading, onConfirm, onDismiss, compact = false }) {
  const suggestion = row.autopay_suggestion;
  if (!suggestion) return null;

  const title = `${fmt(suggestion.amount)} due ${fmtDate(suggestion.paid_date)}`;

  return (
    <div className={cn(
      'flex items-center gap-1.5',
      compact ? 'w-full flex-wrap justify-end sm:w-auto' : 'justify-end',
    )}>
      <span
        className={cn(
          'inline-flex min-w-0 items-center gap-1.5 rounded-md border border-sky-500/20 bg-sky-500/10',
          'px-2 py-1 text-xs font-medium text-sky-600 dark:text-sky-300',
          compact ? 'mr-auto' : 'max-w-32',
        )}
        title={`Autopay suggested: ${title}`}
      >
        <Clock className="h-3 w-3 shrink-0" />
        <span className="truncate">{compact ? `Suggested ${fmt(suggestion.amount)}` : 'Suggested'}</span>
      </span>
      <Button
        size="icon"
        variant="ghost"
        disabled={loading}
        onClick={onDismiss}
        className="h-8 w-8 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
        title={`Dismiss suggested autopay payment for ${title}`}
        aria-label={`Dismiss suggested autopay payment for ${row.name}`}
      >
        <X className="h-3.5 w-3.5" />
      </Button>
      <Button
        size="icon"
        variant="default"
        disabled={loading}
        onClick={onConfirm}
        className="h-8 w-8"
        title={`Confirm suggested autopay payment for ${title}`}
        aria-label={`Confirm suggested autopay payment for ${row.name}`}
      >
        {loading ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <CheckCircle2 className="h-3.5 w-3.5" />}
      </Button>
    </div>
  );
}