interface Props {
  developers: string[];
  selected: string | null;
  onChange: (dev: string | null) => void;
}

export function DeveloperFilter({ developers, selected, onChange }: Props) {
  return (
    <div className="flex items-center gap-2">
      <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Developer</span>
      <div className="flex bg-slate-100 rounded-lg p-0.5 gap-0.5">
        <button
          onClick={() => onChange(null)}
          className={`px-3 py-1.5 text-[11px] font-bold rounded-md transition-all ${
            selected === null ? "bg-white text-slate-900 shadow-sm" : "text-slate-400 hover:text-slate-600"
          }`}
        >
          All
        </button>
        {developers.map((d) => (
          <button
            key={d}
            onClick={() => onChange(d)}
            className={`px-3 py-1.5 text-[11px] font-bold rounded-md transition-all capitalize ${
              selected === d ? "bg-white text-slate-900 shadow-sm" : "text-slate-400 hover:text-slate-600"
            }`}
          >
            {d}
          </button>
        ))}
      </div>
    </div>
  );
}
