import { Checkbox } from '@chakra-ui/react'
import React from 'react'
import Modal from '~/common/components/elements/Modal'
import { useRegisterStore } from '~/common/stores/useRegisterStore'
import PageContent from '~/modules/page-content'

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' checked={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='/register#tnd' />
      </Modal>
    </>
  )
}

export default TermCondition