'use client'

import { ImageBlock as ImageBlockType } from '../types'
import { ImageIcon } from 'lucide-react'

interface ImageBlockProps {
  block: ImageBlockType
  onChange: (block: ImageBlockType) => void
  isEditing?: boolean
}

export function ImageBlockEditor({ block, onChange, isEditing = true }: ImageBlockProps) {
  const alignClass =
    block.alignment === 'left'
      ? 'text-left'
      : block.alignment === 'right'
        ? 'text-right'
        : 'text-center'

  const widthPct = block.width || 100

  if (!block.url) {
    return (
      <div className={`py-4 ${alignClass}`}>
        <div
          className="inline-flex flex-col items-center justify-center bg-gray-100 rounded-lg p-8"
          style={{ width: `${widthPct}%`, maxWidth: '100%' }}
        >
          <ImageIcon className="h-12 w-12 text-gray-400" />
          <p className="text-sm text-gray-500 mt-2">
            {isEditing ? 'Click to set image URL' : 'No image set'}
          </p>
        </div>
      </div>
    )
  }

  const imgElement = (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={block.url}
      alt={block.alt || 'Email image'}
      style={{ width: `${widthPct}%`, maxWidth: '100%', borderRadius: 4 }}
    />
  )

  return (
    <div className={`py-2 ${alignClass}`}>
      {block.linkUrl && !isEditing ? (
        <a href={block.linkUrl} target="_blank" rel="noopener noreferrer">
          {imgElement}
        </a>
      ) : (
        imgElement
      )}
      {block.caption && (
        <p className="text-sm text-gray-500 mt-1">{block.caption}</p>
      )}
    </div>
  )
}