'use client'

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

export function HeroPreview({ data, variant = 'centered' }: BlockPreviewProps) {
  const title = (data.title as string) || ''
  const subtitle = (data.subtitle as string) || ''
  const image = data.image as string | undefined
  const ctaText = (data.ctaText as string) || ''
  const overlayOpacity = (data.overlayOpacity as number) ?? 0.4

  if (variant === 'split-image') {
    return (
      <div className="border-border flex min-h-[200px] overflow-hidden rounded-md border">
        <div className="flex flex-1 flex-col justify-center gap-3 p-6">
          <h2 className="text-foreground text-2xl font-medium">
            {title || <span className="text-muted-foreground">Hero Title</span>}
          </h2>
          {(subtitle || !title) && (
            <p className="text-muted-foreground text-sm">{subtitle || 'Subtitle text goes here'}</p>
          )}
          {ctaText && (
            <div className="mt-2">
              <span className="bg-primary text-primary-foreground inline-block rounded-md px-4 py-2 text-sm">
                {ctaText}
              </span>
            </div>
          )}
        </div>
        <div className="bg-muted flex flex-1 items-center justify-center">
          {image ? (
            <img src={image} alt="" className="h-full w-full object-cover" />
          ) : (
            <Image size={32} className="text-muted-foreground" />
          )}
        </div>
      </div>
    )
  }

  if (variant === 'minimal') {
    return (
      <div className="border-border flex flex-col items-center gap-3 rounded-md border p-8">
        <h2 className="text-foreground text-2xl font-medium">
          {title || <span className="text-muted-foreground">Hero Title</span>}
        </h2>
        {(subtitle || !title) && (
          <p className="text-muted-foreground text-sm">{subtitle || 'Subtitle text goes here'}</p>
        )}
        {ctaText && (
          <span className="bg-primary text-primary-foreground mt-2 inline-block rounded-md px-4 py-2 text-sm">
            {ctaText}
          </span>
        )}
      </div>
    )
  }

  const isVideo = variant === 'video-bg'

  return (
    <div className="border-border relative flex min-h-[220px] flex-col items-center justify-center gap-3 overflow-hidden rounded-md border p-8">
      {image ? (
        <img src={image} alt="" className="absolute inset-0 h-full w-full object-cover" />
      ) : (
        <div className="bg-muted absolute inset-0" />
      )}
      <div className="bg-background absolute inset-0" style={{ opacity: overlayOpacity }} />
      <div className="relative z-10 flex flex-col items-center gap-3 text-center">
        {isVideo && (
          <div className="bg-primary/90 mb-2 flex h-12 w-12 items-center justify-center rounded-full">
            <Play size={20} className="text-primary-foreground" />
          </div>
        )}
        <h2 className="text-foreground text-2xl font-medium">
          {title || <span className="text-muted-foreground">Hero Title</span>}
        </h2>
        {(subtitle || !title) && (
          <p className="text-muted-foreground text-sm">{subtitle || 'Subtitle text goes here'}</p>
        )}
        {ctaText && (
          <span className="bg-primary text-primary-foreground mt-2 inline-block rounded-md px-4 py-2 text-sm">
            {ctaText}
          </span>
        )}
      </div>
    </div>
  )
}
