import { Checkbox } from '@chakra-ui/react';
import React from 'react';
import { Modal } from '~/components/ui/modal';
import { useRegisterStore } from '../stores/useRegisterStore';

import dynamic from 'next/dynamic';
const PageContent = dynamic(
  () => import('@/lib/content/components/PageContent')
);

const TermCondition = () => {
  const { isOpenTNC, closeTNC, isCheckedTNC, toggleCheckTNC, openTNC } =
    useRegisterStore();

  return (
    <>
      <div className='mt-4 flex items-center gap-x-2'>
        <Checkbox
          id='tnc'
          name='tnc'
          colorScheme='red'
          isChecked={isCheckedTNC}
          onChange={toggleCheckTNC}
        />
        <div>
          <label htmlFor='tnc' className='cursor-pointer'>
            Dengan ini saya menyetujui
          </label>{' '}
          <span
            className='font-medium text-danger-500 cursor-pointer'
            onClick={openTNC}
          >
            syarat dan ketentuan
          </span>
          <label htmlFor='tnc' className='ml-2 cursor-pointer'>
            yang berlaku
          </label>
        </div>
      </div>

      <Modal active={isOpenTNC} close={closeTNC}>
        <PageContent path='/registerTnd' />
      </Modal>
    </>
  );
};

export default TermCondition;