import { HTMLAttributes, forwardRef } from 'react';
import { cn } from '@/lib/utils';
import { Badge } from './Badge';
import { Emoji } from '@/components/ui/Emoji';

interface ColumnHeaderProps extends HTMLAttributes<HTMLDivElement> {
  title: string;
  icon?: string;
  count: number;
  color?: string;
  accentColor?: string;
  borderColor?: string;
  onAddClick?: () => void;
  showAddButton?: boolean;
}

const ColumnHeader = forwardRef<HTMLDivElement, ColumnHeaderProps>(
  (
    {
      className,
      title,
      icon,
      count,
      color,
      accentColor,
      borderColor,
      onAddClick,
      showAddButton = false,
      ...props
    },
    ref
  ) => {
    return (
      <div
        ref={ref}
        className={cn('flex items-center justify-between', className)}
        {...props}
      >
        <div className="flex items-center gap-3">
          <div
            className={cn(
              'w-2 h-2 rounded-full animate-pulse',
              color ? `bg-${color}` : 'bg-[var(--primary)]'
            )}
          />
          <h3
            className={cn(
              'font-mono text-sm font-bold uppercase tracking-wider',
              accentColor || 'text-[var(--foreground)]'
            )}
          >
            {title} {icon && <Emoji emoji={icon} />}
          </h3>
        </div>

        <div className="flex items-center gap-2">
          <Badge variant="default" size="sm">
            {String(count).padStart(2, '0')}
          </Badge>
          {showAddButton && onAddClick && (
            <button
              onClick={onAddClick}
              className={cn(
                'w-5 h-5 rounded-full border border-dashed hover:bg-[var(--card-hover)] transition-colors flex items-center justify-center text-xs font-mono',
                borderColor || 'border-[var(--border)]',
                accentColor || 'text-[var(--muted-foreground)]'
              )}
              title="Ajouter une tâche rapide"
            >
              +
            </button>
          )}
        </div>
      </div>
    );
  }
);

ColumnHeader.displayName = 'ColumnHeader';

export { ColumnHeader };
