"use client";

import { Group } from "@/lib/api";

interface GroupSelectorProps {
  groups: Group[];
  selected: string | null;
  onSelect: (id: string | null) => void;
}

export default function GroupSelector({ groups, selected, onSelect }: GroupSelectorProps) {
  return (
    <div className="flex gap-2 overflow-x-auto scrollbar-hide py-2 px-1">
      <button
        onClick={() => onSelect(null)}
        className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all ${
          selected === null
            ? "bg-gray-800 text-white dark:bg-white dark:text-gray-900"
            : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
        }`}
      >
        Vse
      </button>
      {groups.map((g) => (
        <button
          key={g.id}
          onClick={() => onSelect(g.id)}
          className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all ${
            selected === g.id
              ? "text-white shadow-md"
              : "text-gray-600 dark:text-gray-400 hover:opacity-80"
          }`}
          style={{
            backgroundColor: selected === g.id ? g.color : undefined,
            border: selected !== g.id ? `2px solid ${g.color}` : undefined,
          }}
        >
          {g.icon ? `${g.icon} ` : ""}{g.name}
        </button>
      ))}
    </div>
  );
}