'use client'

import React, { useState } from 'react'
import { CheckboxProps } from '@/app/types'
import { HiQuestionMarkCircle } from 'react-icons/hi'

const CheckboxInput = ({
  handleChange,
  label,
  name,
  checked,
  info,
  enabledText,
  disabledText,
}: CheckboxProps) => {
  const [showTooltip, setShowTooltip] = useState(false)
  return (
    <div className="space-y-3">
      <label className="mb-2 block text-sm font-medium text-gray-500" htmlFor={name}>
        {label}
      </label>
      <div className="flex items-center space-x-3">
        <label className="relative inline-flex cursor-pointer items-center">
          <input
            type="checkbox"
            id={name}
            checked={checked || false}
            onChange={handleChange}
            className="peer sr-only"
          />
          <div className="peer peer-checked:bg-orange h-6 w-11 rounded-full bg-gray-200 peer-focus:outline-none after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white rtl:peer-checked:after:-translate-x-full"></div>
          <span
            className={`ms-3 text-sm select-none ${
              checked ? 'font-medium text-green-600' : 'text-gray-700'
            }`}
          >
            {checked ? `${enabledText}` : `${disabledText}`}
          </span>
        </label>
        <div className="relative flex items-center">
          <button
            type="button"
            className="text-gray-400 hover:text-gray-600 focus:outline-none"
            onMouseEnter={() => setShowTooltip(true)}
            onMouseLeave={() => setShowTooltip(false)}
            onClick={() => setShowTooltip(!showTooltip)}
          >
            <HiQuestionMarkCircle className="h-5 w-5" />
          </button>
          {showTooltip && (
            <div className="absolute bottom-full left-1/2 z-10 mb-3 w-max max-w-xs -translate-x-1/2 rounded-xl bg-white px-4 py-2 text-center text-sm text-gray-700 shadow-lg">
              {info}
              <div className="absolute -bottom-2 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 transform bg-white"></div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default CheckboxInput