import { ReactNode } from 'react'
import { cn } from '@/lib/utils/cn'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { InformationCircleIcon } from '@/components/icons/common'
import { useScopedI18n } from '@/locales/client'

export const BookingContentBlock = ({
  title,
  icon,
  children,
  isFileUploaderForm = false,
  isTooltipOpen,
  onTooltipOpenChange,
}: {
  title?: string
  icon?: ReactNode
  children: ReactNode
  isFileUploaderForm?: boolean
  isTooltipOpen?: boolean
  onTooltipOpenChange?: (open: boolean) => void
  }) => {
  
  const t = useScopedI18n('booking.documents')
  return (
    <div className="gradient-border p-6 bg-transparent-white-8 rounded-lg">
      {title && icon && (
        <div className={cn('flex gap-2 items-center', isFileUploaderForm && 'justify-between')}>
          <div className="flex gap-2 items-center">
            <div className="size-10 rounded-xl bg-transparent-grey-40 flex items-center justify-center">
              {icon}
            </div>
            <div className="b1-semibold text-grey-50">{title}</div>
          </div>
          {isFileUploaderForm && (
            <Tooltip open={isTooltipOpen} onOpenChange={onTooltipOpenChange}>
              <TooltipTrigger>
                <InformationCircleIcon className="size-6 stroke-base-white" />
              </TooltipTrigger>
              <TooltipContent>
                <div className="mb-2 b2-semibold text-base-black">{t('pleaseNote')}</div>
                <div className="label-medium-regular text-grey-600" dangerouslySetInnerHTML={{ __html: t('noteText') }} />
              </TooltipContent>
            </Tooltip>
          )}
        </div>
      )}
      {children}
    </div>
  )
}
