'use client'

import { useRef } from 'react'
import Image from 'next/image'
import Modal from './ui/Modal'

interface MaterialPreviewModalProps {
  isOpen: boolean
  onClose: () => void
  imageUrl: string
  title?: string
  description?: string
}

export default function MaterialPreviewModal({
  isOpen,
  onClose,
  imageUrl,
  title,
  description,
}: MaterialPreviewModalProps) {
  const imageRef = useRef<HTMLDivElement>(null)

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      size="fullscreen"
      closeOnOverlayClick={true}
      closeOnEscape={true}
      showCloseButton={true}
    >
      <div className="relative w-full h-full flex items-center justify-center p-4 -m-6">
        <div className="text-center w-full max-w-7xl">
          <div 
            ref={imageRef}
            className="relative w-full max-w-5xl h-[80vh] mx-auto mb-4"
          >
            <Image
              src={imageUrl}
              alt={title || '素材预览'}
              fill
              unoptimized
              sizes="(max-width: 768px) 100vw, 60vw"
              className="object-contain"
            />
          </div>
          {title && (
            <p className="text-white text-lg font-medium">{title}</p>
          )}
          {description && (
            <p className="text-white/80 text-sm mt-2">{description}</p>
          )}
        </div>
      </div>
    </Modal>
  )
}