import type { KanbanGroupBy } from "@/types/asset-settings";

export interface GroupBySelectorProps {
  value: KanbanGroupBy;
  onChange: (value: KanbanGroupBy) => void;
}

const GROUP_BY_OPTIONS: { value: KanbanGroupBy; label: string }[] = [
  { value: "assetClass", label: "Group by Asset Class" },
  { value: "status", label: "Group by Status" },
  { value: "priority", label: "Group by Priority" },
];

const SELECT_CLASS =
  "rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-medium text-slate-700 hover:bg-slate-50 transition-colors";

export function GroupBySelector({ value, onChange }: GroupBySelectorProps) {
  return (
    <select
      value={value}
      onChange={(e) => onChange(e.target.value as KanbanGroupBy)}
      className={SELECT_CLASS}
    >
      {GROUP_BY_OPTIONS.map(({ value: v, label }) => (
        <option key={v} value={v}>
          {label}
        </option>
      ))}
    </select>
  );
}