'use client'

import { Image } from 'lucide-react'
import type { BlockPreviewProps } from './index.js'

export function ImagePreview({ data, variant = 'full-width' }: BlockPreviewProps) {
  const src = data.src as string | undefined
  const alt = (data.alt as string) || ''
  const caption = (data.caption as string) || ''
  const aspectRatio = (data.aspectRatio as string) || '16/9'

  const roundedClass = variant === 'rounded' ? 'rounded-xl' : 'rounded-md'

  const ImagePlaceholder = ({ className = '' }: { className?: string }) => (
    <div
      className={`bg-muted flex items-center justify-center ${roundedClass} ${className}`}
      style={{ aspectRatio }}
    >
      <Image size={32} className="text-muted-foreground" />
    </div>
  )

  const ImageElement = ({ className = '' }: { className?: string }) =>
    src ? (
      <img
        src={src}
        alt={alt}
        className={`h-auto w-full object-cover ${roundedClass} ${className}`}
        style={{ aspectRatio }}
      />
    ) : (
      <ImagePlaceholder className={className} />
    )

  if (variant === 'side-by-side') {
    return (
      <div className="border-border grid grid-cols-2 gap-3 rounded-md border p-4">
        <ImageElement />
        <ImagePlaceholder />
      </div>
    )
  }

  return (
    <figure className="border-border overflow-hidden rounded-md border p-4">
      <ImageElement />
      {(variant === 'captioned' || caption) && (
        <figcaption className="text-muted-foreground mt-2 text-center text-sm">
          {caption || 'Image caption'}
        </figcaption>
      )}
    </figure>
  )
}
