"use client";

import * as React from "react";
import { Building2, Coins, Layers, ListFilter, Shapes } from "lucide-react";

import { GlassMultiSelectCard } from "@/app/customer/_components/glass-multi-select-card";

export function SettingsCheckboxGroup({
  title,
  search,
  onSearchChange,
  items,
  selected,
  onToggle,
  onSelectAll,
  onSelectNone,
}: {
  title: string;
  search: string;
  onSearchChange: (v: string) => void;
  items: readonly string[];
  selected: string[];
  onToggle: (item: string, checked: boolean) => void;
  onSelectAll: () => void;
  onSelectNone: () => void;
}) {
  const mappedItems = React.useMemo(
    () => items.map((item) => ({ id: item, label: item })),
    [items],
  );

  const icon = React.useMemo(() => {
    const key = title.trim().toLowerCase();
    if (key.includes("bank")) return <Building2 className="size-3.5" />;
    if (key.includes("currenc")) return <Coins className="size-3.5" />;
    if (key.includes("class")) return <Layers className="size-3.5" />;
    if (key.includes("type")) return <Shapes className="size-3.5" />;
    return <ListFilter className="size-3.5" />;
  }, [title]);

  return (
    <GlassMultiSelectCard
      title={title}
      icon={icon}
      search={search}
      onSearchChange={onSearchChange}
      items={mappedItems}
      selectedIds={selected}
      onToggle={onToggle}
      onSelectAll={onSelectAll}
      onSelectNone={onSelectNone}
      listClassName="max-h-[min(42vh,280px)] min-h-[200px]"
      className="min-h-[280px]"
    />
  );
}