'use client';
// Generated with Ion on 2/6/2024, 10:17:46 AM
// Figma Link: https://www.figma.com/file/Qohyu8a8oaVqtDvIRuY120?node-id=657:4038

import { Pencil } from '@phosphor-icons/react';
import Button from 'components/ion/Button';
import CookieRadioBar from 'components/ion/CookieRadioBar';
import { MouseEvent } from 'react';

function CookieSettings() {
  function savePreferencesClickHandler(e: MouseEvent<HTMLButtonElement>) {
    alert('savePreferencesClickHandler fired');
  }
  
  return (
    <div className="bg-base w-[360px] flex-col flex items-start gap-y-6 px-6 py-8 rounded-radius-lg border border-sub-stroke h-fit">
      <div className="flex-col flex items-start">
        <div className="text-2xl text-base-foreground">Cookie Settings</div>
        <div className="text-base font-semibold text-sub-foreground">
          Manage your cookie settings here.
        </div>
      </div>
      <CookieRadioBar
        title="Strictly Necessary"
        subtitle="These cookies are essential in order to use the website and use its features."
      />
      <CookieRadioBar
        subtitle="These cookies allow the website to provide personalized functionality."
        title="Functional Cookies"
      />
      <CookieRadioBar
        subtitle="These cookies help improve the performance of the website."
        title="Performance Cookies"
      />
      <Button
        iconTrailing={<Pencil size={16} weight={'regular'} />}
        emphasis="medium"
        color="primary"
        size="md"
        onClick={savePreferencesClickHandler}
        className="w-full"
      >
        Save Preferences
      </Button>
    </div>
  );
}
export default CookieSettings;