import { HTMLAttributes, forwardRef } from 'react';
import { cn } from '@/lib/utils';

interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
  icon?: string;
  title?: string;
  description?: string;
  accentColor?: string;
  borderColor?: string;
  size?: 'sm' | 'md' | 'lg';
}

const EmptyState = forwardRef<HTMLDivElement, EmptyStateProps>(
  ({ 
    className, 
    icon, 
    title = "NO DATA", 
    description,
    accentColor, 
    borderColor,
    size = 'md',
    ...props 
  }, ref) => {
    const sizes = {
      sm: {
        container: 'py-8',
        icon: 'w-8 h-8 text-lg',
        title: 'text-xs',
        divider: 'w-4 h-0.5'
      },
      md: {
        container: 'py-20',
        icon: 'w-16 h-16 text-2xl',
        title: 'text-xs',
        divider: 'w-8 h-0.5'
      },
      lg: {
        container: 'py-32',
        icon: 'w-24 h-24 text-3xl',
        title: 'text-sm',
        divider: 'w-12 h-0.5'
      }
    };

    const currentSize = sizes[size];

    return (
      <div
        ref={ref}
        className={cn("text-center", currentSize.container, className)}
        {...props}
      >
        <div 
          className={cn(
            "mx-auto mb-4 rounded-full bg-[var(--card)] border-2 border-dashed flex items-center justify-center",
            currentSize.icon,
            borderColor || "border-[var(--border)]"
          )}
        >
          <span 
            className={cn(
              "opacity-50",
              accentColor || "text-[var(--muted-foreground)]"
            )}
          >
            {icon || "📋"}
          </span>
        </div>
        
        <p 
          className={cn(
            "font-mono uppercase tracking-wide",
            currentSize.title,
            accentColor || "text-[var(--muted-foreground)]"
          )}
        >
          {title}
        </p>
        
        {description && (
          <p 
            className={cn(
              "mt-2 text-xs text-[var(--muted-foreground)]",
              accentColor || "text-[var(--muted-foreground)]"
            )}
          >
            {description}
          </p>
        )}
        
        <div className="mt-2 flex justify-center">
          <div 
            className={cn(
              "opacity-30",
              currentSize.divider,
              accentColor ? accentColor.replace('text-', 'bg-') : "bg-[var(--muted-foreground)]"
            )}
          />
        </div>
      </div>
    );
  }
);

EmptyState.displayName = 'EmptyState';

export { EmptyState };