import React from 'react'

export default function UploadPreview({
  title = 'Preview',
  description = 'Live artwork preview placeholder',
  previewUrl = '',
  isArchive = false,
  metadata = {
    resolution: '—',
    size: '—',
    type: '—',
  },
  warnings = [],
  errors = [],
  invalid = false,
}) {
  return (
    <section className={`rounded-xl border bg-gradient-to-br p-5 shadow-[0_12px_32px_rgba(0,0,0,0.35)] transition-colors sm:p-6 ${invalid ? 'border-red-400/45 from-red-500/10 to-slate-900/45' : 'border-white/50 from-slate-900/80 to-slate-900/45'}`}>
      {/* Intended props: file, previewUrl, isArchive, dimensions, fileSize, format, warning */}
      <div className={`rounded-xl border p-4 transition-colors ${invalid ? 'border-red-300/45 bg-red-500/5' : 'border-white/50 bg-black/25'}`}>
        <div className="flex items-center justify-between gap-3">
          <h3 className="text-lg font-semibold text-white">{title}</h3>
          <span className="rounded-full border border-white/15 bg-white/5 px-2.5 py-1 text-[11px] text-white/65">
            {isArchive ? 'Archive' : 'Image'}
          </span>
        </div>
        <p className="mt-1 text-sm text-white/65">{description}</p>

        <div className="mt-4 flex flex-col md:flex-row gap-4 items-start">
          <div className="w-40 h-40 rounded-lg overflow-hidden bg-black/40 ring-1 ring-white/10 flex items-center justify-center">
            {previewUrl && !isArchive ? (
              <img src={previewUrl} alt="Upload preview" className="max-w-full max-h-full object-contain" />
            ) : (
              <span className="text-sm text-soft">{isArchive ? 'Archive selected' : 'Image preview placeholder'}</span>
            )}
          </div>

          <div className="flex-1 space-y-2 text-sm">
            <div>
              <span className="text-soft">Type</span>
              <span className="text-white ml-2">{metadata.type}</span>
            </div>
            <div>
              <span className="text-soft">Size</span>
              <span className="text-white ml-2">{metadata.size}</span>
            </div>
            <div>
              <span className="text-soft">Resolution</span>
              <span className="text-white ml-2">{metadata.resolution}</span>
            </div>
            {errors.length > 0 && (
              <ul className="space-y-1" role="status" aria-live="polite">
                {errors.map((error, index) => (
                  <li key={`${error}-${index}`} className="text-red-400 text-xs">
                    {error}
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>

        {warnings.length > 0 && (
          <ul className="mt-4 space-y-1 text-xs text-amber-100" role="status" aria-live="polite">
            {warnings.map((warning, index) => (
              <li key={`${warning}-${index}`} className="rounded-md border border-amber-300/35 bg-amber-500/10 px-2 py-1">
                {warning}
              </li>
            ))}
          </ul>
        )}

      </div>
    </section>
  )
}