'use client';

import { TaskStatus } from '@/lib/types';
import { getAllStatuses } from '@/lib/status-config';

interface ColumnVisibilityToggleProps {
  hiddenStatuses: Set<TaskStatus>;
  onToggleStatus: (status: TaskStatus) => void;
  className?: string;
}

export function ColumnVisibilityToggle({
  hiddenStatuses,
  onToggleStatus,
  className = ""
}: ColumnVisibilityToggleProps) {
  const statuses = getAllStatuses();

  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <span className="text-sm font-mono font-medium text-slate-400">
        Colonnes :
      </span>
      {statuses.map(statusConfig => (
        <button
          key={statusConfig.key}
          onClick={() => onToggleStatus(statusConfig.key)}
          className={`px-3 py-1 rounded-lg text-xs font-mono font-medium transition-colors ${
            hiddenStatuses.has(statusConfig.key)
              ? 'bg-slate-700/50 text-slate-500 hover:bg-slate-700'
              : 'bg-blue-600/20 text-blue-300 border border-blue-500/30 hover:bg-blue-600/30'
          }`}
          title={hiddenStatuses.has(statusConfig.key) ? `Afficher ${statusConfig.label}` : `Masquer ${statusConfig.label}`}
        >
          {hiddenStatuses.has(statusConfig.key) ? '👁️‍🗨️' : '👁️'} {statusConfig.label}
        </button>
      ))}
    </div>
  );
}