import * as Icons from 'lucide-react'

import { CardHeader, CardTitle } from '@/components/ui/card'
import { Dialog, DialogContent } from '@/components/ui/dialog'

export function WizardLayout({
  title,
  onClose,
  headerSlot,
  footerSlot,
  children,
}: {
  title: string
  onClose: () => void
  headerSlot?: React.ReactNode
  footerSlot?: React.ReactNode
  children: React.ReactNode
}) {
  return (
    <Dialog open={true} onOpenChange={(open) => !open && onClose()}>
      <DialogContent
        className="flex h-[90vh] w-[calc(100%-2rem)] flex-col gap-0 overflow-hidden p-0 sm:max-w-4xl"
        onInteractOutside={(e) => {
          e.preventDefault()
        }}
      >
        <div className="z-10 flex-none border-b bg-white">
          <CardHeader className="flex flex-row items-center justify-between gap-4 p-6 pb-4">
            <CardTitle>{title}</CardTitle>
            <button
              onClick={onClose}
              className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none"
            >
              <Icons.X className="h-4 w-4" />
              <span className="sr-only">Cerrar</span>
            </button>
          </CardHeader>

          {headerSlot ? <div className="px-6 pb-6">{headerSlot}</div> : null}
        </div>

        <div className="flex-1 overflow-y-auto bg-gray-50/30 p-6">
          {children}
        </div>

        {footerSlot ? (
          <div className="flex-none border-t bg-white p-6">{footerSlot}</div>
        ) : null}
      </DialogContent>
    </Dialog>
  )
}