import { X } from 'lucide-react'
import { Modal } from '@/components'
import { cn, interactive } from '@/lib'
import { GuideContent, GuideContactBox } from './GuideContent'

// 유의사항 및 이용방법 팝업 (메뉴 버튼으로 여는 수동형). X 버튼 · 배경 클릭 · ESC 로 닫는다.
export function ServiceGuidePopup({ onClose }: { onClose: () => void }) {
  return (
    <Modal onClose={onClose}>
      <div className="flex max-h-[90vh] w-full max-w-[1000px] flex-col items-end gap-6 overflow-y-auto rounded-3xl bg-white px-12 pb-[56px] pt-8">
        <button
          type="button"
          aria-label="닫기"
          onClick={onClose}
          className={cn(
            'flex size-10 flex-shrink-0 items-center justify-center rounded-full bg-neutral-10',
            interactive,
          )}
        >
          <X size={20} className="text-neutral-80" />
        </button>
        <div className="flex w-full flex-col gap-6 px-[40px]">
          <GuideContent />
          <GuideContactBox />
        </div>
      </div>
    </Modal>
  )
}