"use client";

import { TEAM_ICON_OPTIONS } from "@/components/teams/TeamIcon";
import { cn } from "@/lib/utils";

export function TeamIconPicker({
  value,
  onChange,
}: {
  value: string;
  onChange: (icon: string) => void;
}) {
  return (
    <div className="flex flex-wrap gap-2">
      {TEAM_ICON_OPTIONS.map(({ id, label, Icon }) => (
        <button
          key={id}
          type="button"
          title={label}
          onClick={() => onChange(id)}
          className={cn(
            "flex h-10 w-10 items-center justify-center rounded-lg border transition-colors",
            value === id
              ? "border-cyan-400/50 bg-cyan-500/20 text-cyan-400"
              : "border-white/10 bg-white/5 text-[var(--color-muted)] hover:border-white/20"
          )}
        >
          <Icon className="h-5 w-5" />
        </button>
      ))}
    </div>
  );
}