"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 px-4 py-3"
      style={{ WebkitOverflowScrolling: "touch" } as React.CSSProperties}
    >
      <button
        onClick={() => onSelect(null)}
        className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all min-h-[36px] whitespace-nowrap ${
          selected === null
            ? "bg-gray-800 text-white dark:bg-white dark:text-gray-900 shadow-md"
            : "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
        }`}
      >
        V\u0161e
      </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 min-h-[36px] flex items-center gap-1.5 whitespace-nowrap ${
            selected === g.id
              ? "text-white shadow-md"
              : "hover:opacity-80"
          }`}
          style={{
            backgroundColor: selected === g.id ? g.color : undefined,
            border: selected !== g.id ? `2px solid ${g.color}` : undefined,
            color: selected !== g.id ? g.color : undefined,
          }}
        >
          {g.icon && <span className="text-base">{g.icon}</span>}
          <span>{g.name}</span>
        </button>
      ))}
    </div>
  );
}