/*

import { useState } from "react";

import { Checkbox } from "../Checkbox/Checkbox";
import { CheckboxList } from "../Checkbox/Checkbox.types";
import { useForm, FormProvider } from "react-hook-form";
import { Typography } from "../Typography";

type CheckboxCardProps = {
title: string;
description?: string;
checked: boolean;
onChangeHandle: (checked: boolean) => void;
};

const CheckboxCard = ({
title = "Device & Usage Report",
description = "Access device and usage reports",
checked = false,
onChangeHandle,
}: CheckboxCardProps) => {
const [isChecked, setIsChecked] = useState(checked);
const methods = useForm();
const checkboxList: CheckboxList[] = [
{
id: 1,
selected: isChecked,
visible: true,
value: "",
},
];

const handleCheckboxChange = (isChecked: boolean) => {

setIsChecked(isChecked);
onChangeHandle(isChecked);
};

return (
<FormProvider {...methods}>
<div className="w-screen h-screen flex flex-col justify-center">
<div className="p-4">
<div
className={`flex gap-2 p-4 border bg-primary-50 rounded-xl transition-
all duration-150 ease-in-out transform ${
isChecked
? " border-2 border-purple-600 scale-[1.03]"
: "border-gray-200"
}`}
>
<div>
<Checkbox
checkboxHeaderLabel=""
name="checkboxCard"
checkboxList={checkboxList}
control={methods.control}
variant="primary"
size="base"
onChange={(activeIds) =>
 handleCheckboxChange(activeIds.length > 0)
}
/>
</div>
<div className="flex flex-col justify-center">
<Typography
text={title}
variant="p"
isSmall={false}
color={`${isChecked ? "text-primary-800" : "text-gray-700"}`}
className="font-medium"
/>
{description && (
<Typography
text={description}
variant="p"
isSmall={false}
color={`${isChecked ? "text-primary-700" : "text-gray-600"}`}
className="font-normal"
/>
)}
</div>
</div>
</div>
</div>
</FormProvider>
);
};

export default CheckboxCard;

and what you should add in story:

//onChangeHandle: { action: "changed" },

/*

<div
className={`text-base font-medium font-inter ${
isChecked ? "text-primary-800" : "text-gray-700"
}`}
>
{title}
</div>

<div
className={`text-[15px] font-normal font-inter ${
isChecked ? "text-[rgba(105,65,198,1)]" : "text-gray-600"
}`}
>
{description}
</div>

*/
/*
your prev styling to make it responsive
<div className="w-screen h-screen flex flex-col justify-center">
<div className="p-4">
<div
className={` flex p-4 border bg-primary-50 rounded-xl transition-all
duration-150 ease-in-out transform ${isChecked ? " border-2 border-purple-600
scale-[1.03]" : "border-gray-200"}`}>

const handleChange = (activeIds: number[]) => {

setIsChecked(activeIds.length > 0);
};

useEffect(() => {
setIsChecked(checked);
}, [checked]);
*/

//newest mihir contribution and meltem requests component without form provider

/*
import { useEffect, useState } from "react";
import { useForm } from "react-hook-form";
import { Checkbox } from "../Checkbox/Checkbox";
import { Typography } from "../Typography";

type CheckboxProps = {
title: string;
description?: string;
checked: boolean;
};

interface IFormInputs {
MyCheckbox: boolean;
}

const CheckboxCard = ({
title = "Device & Usage Report",
description = "Access device and usage reports",
checked = false,
}: CheckboxProps) => {
const [isChecked, setIsChecked] = useState(checked);

const { control,setValue } = useForm<IFormInputs>({

defaultValues: {
MyCheckbox: checked,
},
});

const handleChange = (activeIds: number[]) => {

 const newCheckedState = activeIds.length > 0;
setIsChecked(newCheckedState);
setValue("MyCheckbox", newCheckedState);
};

useEffect(() => {
setIsChecked(checked);
setValue("MyCheckbox", checked);
}, [checked, setValue]);

return (
<div className="w-screen flex items-center p-4">
<div className="w-full max-w-4xl">
<div
className={`flex justify-start items-center p-4 border bg-primary-50
rounded-xl transition-all duration-150 ease-in-out transform ${isChecked ? "
border-2 border-purple-600 scale-[1.03]" : "border-gray-200"}`}
>
<div className="pb-2">
<Checkbox
name="MyCheckbox"
control={control}
checkboxList={[
{ id: 1, selected: isChecked, visible: true, value: "" },
]}
variant="primary"
size="base"
onChange={handleChange}
/>
</div>
<div className="flex flex-col justify-center">
<Typography
text={title}
variant="p"
isSmall={false}
color={`${isChecked ? "text-primary-800" : "text-gray-700"}`}
className="font-medium"
/>
{description && (
<Typography
text={description}
variant="p"
isSmall={false}
color={`${isChecked ? "text-primary-700" : "text-gray-600"}`}
className="font-normal"
/>
)}
</div>
</div>
</div>
</div>
);
};

export default CheckboxCard;

propa id ekle ve default title ve description vermene gerek yok.
componenti pr olarak attığın ve form provider kullandığın haline çevir ve pr gönder
*/