import { JSX } from 'react';

import CookieToggle from '@/components/cookies/CookieToggle';

import { CookieOption as CookieOptionType } from '@/types/Cookies';

interface CookieOptionProps {
  active: boolean;
  onActiveChange: () => void;
  data: CookieOptionType;
}

export default function CookieOption({
  active,
  onActiveChange,
  data,
}: CookieOptionProps): JSX.Element {
  return (
    <div className="flex flex-col gap-2">
      <button
        className="flex items-center gap-3 md:gap-2 group text-left"
        onClick={() => onActiveChange()}
        disabled={data.disabled}
      >
        <CookieToggle active={active} />
        <div className="text-sm font-semibold">{data.title}</div>
      </button>

      <div className="text-[10px]">{data.description}</div>
    </div>
  );
}