"use client";

import React, { useState } from "react";
import Image from "next/image";
import { CheckTypes } from "./CheckTypes";

interface Props {
  options: CheckTypes[];
  onChange?: (roleSelected: number[]) => void;
}

const CheckboxImageGroup: React.FC<Props> = ({ options, onChange }) => {
  const [roleSelected, setRoleSelected] = useState<number[]>([]);

  const handleToggle = (id: number) => {
    const updatedRoles = roleSelected.includes(id)
      ? roleSelected.filter((item) => item !== id)
      : [...roleSelected, id];

    setRoleSelected(updatedRoles);
    onChange?.(updatedRoles);
    //console.log(updatedRoles);
  };

  return (
    <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
      {options.map((option) => {
        const isChecked = roleSelected.includes(option.id);
        return (
          <label
            key={option.id}
            className={`flex cursor-pointer flex-col items-center justify-center gap-1 border-1 px-4 py-2 text-center transition-all duration-300 hover:bg-gray-100 ${isChecked ? "border-transparent bg-blue-100/50 outline-3 outline-blue-400" : "border-dashed"}`}
          >
            <input
              type="checkbox"
              value={option.id}
              checked={isChecked}
              onChange={() => handleToggle(option.id)}
              className="sr-only"
            />
            <div className="flex px-6">
              <Image
                src={option.image}
                alt={option.label}
                width={256}
                height={256}
                className="img-responsive"
              />
            </div>
            <span className="text-sm font-medium">{option.label}</span>
            <p className="text-[10px]/3">{option.summary}</p>
          </label>
        );
      })}
    </div>
  );
};

export default CheckboxImageGroup;