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

interface FilterChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'default' | 'selected' | 'hidden' | 'priority' | 'tag';
  color?: string;
  count?: number;
  icon?: React.ReactNode;
  size?: 'sm' | 'md';
}

const FilterChip = forwardRef<HTMLButtonElement, FilterChipProps>(
  (
    {
      className,
      variant = 'default',
      color,
      count,
      icon,
      size = 'sm',
      children,
      ...props
    },
    ref
  ) => {
    const variants = {
      default:
        'border-[var(--border)] bg-[var(--card)] text-[var(--muted-foreground)] hover:border-[var(--border)] hover:bg-[var(--card)]/80',
      selected: 'border-cyan-400 bg-cyan-400/10 text-cyan-400',
      hidden:
        'bg-[var(--muted)]/20 text-[var(--muted)] border-[var(--muted)]/30 hover:bg-[var(--muted)]/30',
      priority:
        'border-[var(--border)] bg-[var(--card)] text-[var(--muted-foreground)] hover:border-[var(--border)]',
      tag: 'border-[var(--border)] bg-[var(--card)] text-[var(--muted-foreground)] hover:border-[var(--border)]',
    };

    const sizes = {
      sm: 'px-2 py-1 text-xs',
      md: 'px-3 py-1.5 text-sm',
    };

    return (
      <button
        ref={ref}
        className={cn(
          'flex items-center gap-2 rounded border transition-all font-medium cursor-pointer',
          variants[variant],
          sizes[size],
          className
        )}
        {...props}
      >
        {icon && <div className="flex-shrink-0">{icon}</div>}

        {color && (
          <div
            className="w-2 h-2 rounded-full flex-shrink-0"
            style={{ backgroundColor: color }}
          />
        )}

        <span className="flex-1 text-left">
          {children}
          {count !== undefined && count > 0 && (
            <span className="ml-1 opacity-75">({count})</span>
          )}
        </span>
      </button>
    );
  }
);

FilterChip.displayName = 'FilterChip';

export { FilterChip };
