'use client'

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

export function VideoPreview({ data, variant = 'inline' }: BlockPreviewProps) {
  const poster = data.poster as string | undefined
  const autoplay = data.autoplay as boolean | undefined
  const loop = data.loop as boolean | undefined

  const badges: string[] = [autoplay ? 'Autoplay' : '', loop ? 'Loop' : ''].filter(
    (b): b is string => b !== '',
  )

  const content = (
    <div className="bg-muted relative flex aspect-video items-center justify-center overflow-hidden rounded-md">
      {poster ? (
        <img src={poster} alt="" className="absolute inset-0 h-full w-full object-cover" />
      ) : (
        <div className="bg-card absolute inset-0" />
      )}
      <div className="bg-primary/90 relative z-10 flex h-12 w-12 items-center justify-center rounded-full shadow-sm">
        <Play size={20} className="text-primary-foreground" />
      </div>
      {badges.length > 0 && (
        <div className="absolute right-2 bottom-2 z-10 flex gap-1">
          {badges.map((badge) => (
            <span
              key={badge}
              className="bg-background/80 text-muted-foreground rounded px-1.5 py-0.5 text-xs"
            >
              {badge}
            </span>
          ))}
        </div>
      )}
    </div>
  )

  if (variant === 'background') {
    return (
      <div className="border-border overflow-hidden rounded-md border">
        <div className="relative aspect-[21/9]">
          {poster ? (
            <img src={poster} alt="" className="absolute inset-0 h-full w-full object-cover" />
          ) : (
            <div className="bg-card absolute inset-0" />
          )}
          <div className="bg-background/30 absolute inset-0 flex items-center justify-center">
            <div className="bg-primary/90 flex h-14 w-14 items-center justify-center rounded-full shadow-sm">
              <Play size={24} className="text-primary-foreground" />
            </div>
          </div>
        </div>
      </div>
    )
  }

  if (variant === 'lightbox') {
    return (
      <div className="border-border rounded-md border p-4">
        <div className="mx-auto max-w-sm">
          {content}
          <p className="text-muted-foreground mt-2 text-center text-xs">
            Click to play in lightbox
          </p>
        </div>
      </div>
    )
  }

  return <div className="border-border rounded-md border p-4">{content}</div>
}
