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 };
