"use client";

import { cn } from "@/lib/utils";

interface CheckboxGroupProps {
  title: string;
  options: { label: string; value: string }[];
  value: string[];
  onChange: (values: string[]) => void;
  className?: string;
  columns?: 2 | 3 | 4;
  name?: string;
}

export default function CheckboxGroup({
  title,
  options,
  value,
  onChange,
  className,
  columns = 3,
  name,
}: CheckboxGroupProps) {
  const handleToggle = (optValue: string) => {
    if (value.includes(optValue)) {
      onChange(value.filter((v) => v !== optValue));
    } else {
      onChange([...value, optValue]);
    }
  };

  return (
    <div className={cn("bg-[#F1F5F9] p-4 rounded-md", className)}>
      <h3 className="text-[#052531] font-bold text-md mb-3">{title}</h3>

      {/* Hidden Inputs for FormData */}
      {name && value.map((val) => (
        <input key={val} type="hidden" name={`${name}[]`} value={val} />
      ))}

      <div
        className={cn(
          "grid gap-3",
          columns === 2 && "grid-cols-2",
          columns === 3 && "grid-cols-2 md:grid-cols-3",
          columns === 4 && "grid-cols-2 md:grid-cols-4"
        )}
      >
        {options.map((opt) => (
          <label
            key={opt.value}
            className="flex items-center gap-2 cursor-pointer text-sm text-[#45556C]"
          >
            <input
              type="checkbox"
              checked={value.includes(opt.value)}
              onChange={() => handleToggle(opt.value)}
              className="w-4 h-4 rounded accent-[#05222D]"
            />
            {opt.label}
          </label>
        ))}
      </div>
    </div>
  );
}