import { Switch } from "@/components/ui/switch";
import SectionHeader from "../dashboard/section-header";
import { Dispatch, SetStateAction } from "react";

interface SettingToggleSectionProps {
  title: string;
  value: boolean;
  setValue: Dispatch<SetStateAction<boolean>>;
  description: string;
}

function SettingToggleSection({ title, value, setValue, description }: SettingToggleSectionProps) {
  return (
    <div className="flex flex-col py-10 gap-6">
      <div className="flex gap-5">
        <SectionHeader classStyle="w-[346px]">{title}</SectionHeader>
        <Switch checked={value} onCheckedChange={setValue} />
      </div>
      <p className="text-[16px] leading-[140%] text-[#6E6E6E] w-[444px]">{description}</p>
    </div>
  );
}

export default SettingToggleSection;