"use client";
import { useState } from "react";
interface CheckboxProps {
  nameId: string;
  checked: boolean;
  label: string;
}

const CheckboxFour = ({ nameId, checked, label }: CheckboxProps) => {
  console.log(checked);

  const [isChecked, setIsChecked] = useState<boolean>(false);
  setIsChecked(checked);
  return (
    <div>
      <label
        htmlFor={nameId}
        className="flex cursor-pointer select-none items-center"
      >
        <div className="relative">
          <input
            type="radio"
            id={nameId}
            className="sr-only"
            onChange={() => {
              setIsChecked(!isChecked);
            }}
          />
          <div
            className={`mr-4 flex h-5 w-5 items-center justify-center rounded-full border ${
              isChecked && "border-primary"
            }`}
          >
            <span
              className={`h-2.5 w-2.5 rounded-full bg-transparent ${
                isChecked && "!bg-primary"
              }`}
            ></span>
          </div>
        </div>
        {label}
      </label>
    </div>
  );
};

export default CheckboxFour;