"use client";

import AppContext from "@ctx/AppContext";
import React, { useContext, useState } from "react";

const page = ({ title, detail, value }) => {
  const CTX = useContext(AppContext);

  const [isChecked, setIsChecked] = useState(false);

  const hanslePermissionsChoose = (e) => {
    setIsChecked(e.target.checked);
    CTX.setPermissionsChoose((current) => [...current, value]);
  };
  return (
    <div className="flex rtl mt-4">
      <div>
        <input
          type="checkbox"
          className="w-[40px] h-[40px] !rounded-xl mx-2 custom-checkbox mt-1"
          checked={isChecked ? true : false}
          defaultValue={isChecked}
          name="hasSchengenRelative"
          //   onClick={checkBoxEvent}
          onChange={(e) => hanslePermissionsChoose(e)}
        />
      </div>

      <div>
        <h2 className="font-bold text-textMain-100">{title}</h2>
        <p className="mb-0 text-textMain-100 text-right text-sm">{detail} </p>
      </div>
    </div>
  );
};

export default page;