'use client';

import { TaskStatus } from '@/lib/types';

interface ColumnVisibilityToggleProps {
  statuses: { id: TaskStatus; title: string; color: string }[];
  hiddenStatuses: Set<TaskStatus>;
  onToggleStatus: (status: TaskStatus) => void;
  className?: string;
}

export function ColumnVisibilityToggle({
  statuses,
  hiddenStatuses,
  onToggleStatus,
  className = ""
}: ColumnVisibilityToggleProps) {
  return (
    <div className={`flex items-center gap-2 ${className}`}>
      <span className="text-sm font-mono font-medium text-slate-400">
        Colonnes :
      </span>
      {statuses.map(status => (
        <button
          key={status.id}
          onClick={() => onToggleStatus(status.id)}
          className={`px-3 py-1 rounded-lg text-xs font-mono font-medium transition-colors ${
            hiddenStatuses.has(status.id)
              ? '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(status.id) ? `Afficher ${status.title}` : `Masquer ${status.title}`}
        >
          {hiddenStatuses.has(status.id) ? '👁️‍🗨️' : '👁️'} {status.title}
        </button>
      ))}
    </div>
  );
}