import React from 'react';
import { cn } from '@/lib/utils';

export type StatusType = 'paid' | 'lunas' | 'berhasil' | 'verified' | 'pending' | 'menunggu' | 'overdue' | 'gagal' | 'warning';

interface StatusBadgeProps {
  status: string;
  type?: StatusType;
  className?: string;
  variant?: 'dot' | 'badge';
}

export function StatusBadge({ status, type, className, variant = 'badge' }: StatusBadgeProps) {
  const normalizedType = (type || status).toLowerCase() as StatusType;

  let colorClass = 'bg-slate-100 text-slate-700';
  let dotClass = 'bg-slate-500';
  let isPulse = false;

  if (['paid', 'lunas', 'berhasil', 'verified'].includes(normalizedType)) {
    colorClass = 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400';
    dotClass = 'bg-emerald-500 text-emerald-600 dark:text-emerald-400';
  } else if (['pending', 'menunggu', 'warning'].includes(normalizedType)) {
    colorClass = 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-400';
    dotClass = 'bg-orange-500 text-orange-500 dark:text-orange-400';
    isPulse = true;
  } else if (['overdue', 'gagal'].includes(normalizedType)) {
    colorClass = 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400';
    dotClass = 'bg-red-500 text-red-600 dark:text-red-400';
  }

  if (variant === 'dot') {
    return (
      <span className={cn('flex items-center gap-1.5 font-bold text-[11px] uppercase tracking-wider', dotClass.split(' ')[1], className)}>
        <span className={cn('w-1.5 h-1.5 rounded-full', dotClass.split(' ')[0], isPulse && 'animate-pulse')} />
        {status}
      </span>
    );
  }

  return (
    <span className={cn('inline-block px-2 py-0.5 text-[10px] font-bold uppercase rounded', colorClass, className)}>
      {status}
    </span>
  );
}