import { useState } from 'react'

import { Button } from './Button'

export interface BadgeConfirmationModalProps {
  confirm: () => void
}
export const BadgeConfirmationModal = (props: BadgeConfirmationModalProps) => {
  const [isChecked, setIsChecked] = useState(false)
  return (
    <div>
      <input className="modal-toggle" defaultChecked id="my-modal-2" type="checkbox" />
      <label className="cursor-pointer modal" htmlFor="my-modal-2">
        <label
          className="absolute top-[25%] bottom-5 left-1/3 max-w-[600px] max-h-[400px] border-2 no-scrollbar modal-box"
          htmlFor="temp"
        >
          {/* <Alert type="warning"></Alert> */}
          <div className="text-xl font-bold">
            <div className="text-sm font-thin">
              You represent and warrant that you have, or have obtained, all rights, licenses, consents, permissions,
              power and/or authority necessary to grant the rights granted herein for any content that you create,
              submit, post, promote, or display on or through the Service. You represent and warrant that such contain
              material subject to copyright, trademark, publicity rights, or other intellectual property rights, unless
              you have necessary permission or are otherwise legally entitled to post the material and to grant Stargaze
              Parties the license described above, and that the content does not violate any laws.
            </div>
            <br />
            <div className="flex flex-row pb-4">
              <label className="flex flex-col space-y-1" htmlFor="terms">
                <span className="text-sm font-light text-white">I agree with the terms above.</span>
              </label>
              <input
                checked={isChecked}
                className="p-2 mb-1 ml-2"
                id="terms"
                name="terms"
                onClick={() => setIsChecked(!isChecked)}
                type="checkbox"
              />
            </div>
            <br />
            Are you sure to proceed with creating a new badge?
          </div>
          <div className="flex justify-end w-full">
            <Button className="px-0 mt-4 mr-5 mb-4 max-h-12 bg-gray-600 hover:bg-gray-600">
              <label
                className="w-full h-full text-white bg-gray-600 hover:bg-gray-600 rounded border-0 btn modal-button"
                htmlFor="my-modal-2"
              >
                Go Back
              </label>
            </Button>
            <Button className="px-0 mt-4 mb-4 max-h-12" isDisabled={!isChecked} onClick={props.confirm}>
              <label
                className="w-full h-full text-white bg-plumbus hover:bg-plumbus-light border-0 btn modal-button"
                htmlFor="my-modal-2"
              >
                Confirm
              </label>
            </Button>
          </div>
        </label>
      </label>
    </div>
  )
}