import { Button } from '@/components/ui/button'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { useScopedI18n } from '@/locales/client'
import { Check, X } from 'lucide-react'
import { useState } from 'react'

export const useGetCongratsModal = () => {
  const [modalOpen, setModalOpen] = useState(false)
  const t = useScopedI18n('booking.modal.congrats')

  const modalComponent = (
    <Dialog open={modalOpen} onOpenChange={setModalOpen}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle />
        </DialogHeader>
        <div className="mx-auto size-20 rounded-xl bg-transparent-grey-40 flex items-center justify-center">
          <Check size={60} className="stroke-func-orange-main" />
        </div>
        <div className="subheadline-semibold text-grey-50 mt-4 text-center">
          {t('title')}
        </div>
        <div className="text-grey-200 label-large-regular mt-2 text-center">
          {t('text')}
        </div>
      </DialogContent>
    </Dialog>
  )

  return { modalComponent, setModalOpen }
}

export const useErrorModalContent = () => {
  const [modalOpen, setModalOpen] = useState(false)
  // const [error, setError] = useState('Booking failed. Please try again.')
  const t = useScopedI18n('booking.modal.error')

  const modalComponent = (
    <Dialog open={modalOpen} onOpenChange={setModalOpen}>
      <DialogContent className="sm:max-w-[425px]">
        <DialogHeader>
          <DialogTitle />
        </DialogHeader>
        <div className="mx-auto size-20 rounded-xl bg-transparent-grey-40 flex items-center justify-center">
          <X size={60} className="stroke-func-orange-main" />
        </div>
        <div className="subheadline-semibold text-grey-50 mt-4 text-center">
          {t('title')}
        </div>
        <div className="text-grey-200 label-large-regular mt-2 text-center">
          {t('error')}
        </div>
        <Button
          className="mx-auto justify-center max-w-32"
          onClick={() => setModalOpen(false)}
          variant="primary"
        >
          {t('text')}
        </Button>
      </DialogContent>
    </Dialog>
  )

  return { modalComponent, setModalOpen }
}
