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

interface StatusBadgeProps {
  status: StatusPrestasi;
  className?: string;
}

export function StatusBadge({ status, className }: StatusBadgeProps) {
  const getStatusConfig = () => {
    switch (status) {
      case 'draft':
        return {
          label: 'Draft',
          styles: 'bg-text-muted/10 text-text-muted border-text-muted/20',
        };
      case 'menunggu_verifikasi':
        return {
          label: 'Menunggu Verifikasi',
          styles: 'bg-warning/10 text-warning border-warning/20',
        };
      case 'terverifikasi':
        return {
          label: 'Terverifikasi',
          styles: 'bg-success/10 text-success border-success/20',
        };
      case 'ditolak':
        return {
          label: 'Ditolak',
          styles: 'bg-danger/10 text-danger border-danger/20',
        };
      default:
        return {
          label: status,
          styles: 'bg-text-muted/10 text-text-muted border-text-muted/20',
        };
    }
  };

  const config = getStatusConfig();

  return (
    <span
      className={cn(
        'inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border transition-colors duration-200',
        config.styles,
        className
      )}
    >
      <span className="w-1.5 h-1.5 rounded-full mr-1.5 bg-current animate-pulse" />
      {config.label}
    </span>
  );
}