'use client'

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

interface CardItem {
  title?: string
  description?: string
  image?: string
  link?: string
  icon?: string
}

export function CardsPreview({ data, variant = 'grid-3' }: BlockPreviewProps) {
  const items = (data.items as CardItem[]) || []

  const placeholderItems: CardItem[] =
    items.length > 0
      ? items
      : [
          { title: 'Card Title', description: 'Card description text' },
          { title: 'Card Title', description: 'Card description text' },
          { title: 'Card Title', description: 'Card description text' },
        ]

  const gridClass =
    variant === 'grid-2'
      ? 'grid grid-cols-2 gap-3'
      : variant === 'grid-4'
        ? 'grid grid-cols-4 gap-3'
        : variant === 'horizontal'
          ? 'flex gap-3 overflow-hidden'
          : 'grid grid-cols-3 gap-3'

  return (
    <div className="border-border rounded-md border p-4">
      <div className={gridClass}>
        {placeholderItems.map((item, i) => (
          <div
            key={i}
            className={`border-border bg-card flex flex-col overflow-hidden rounded-md border ${variant === 'horizontal' ? 'min-w-40' : ''}`}
          >
            <div className="bg-muted flex h-20 items-center justify-center">
              {item.image ? (
                <img
                  src={item.image}
                  alt={item.title || ''}
                  className="h-full w-full object-cover"
                />
              ) : (
                <Image size={20} className="text-muted-foreground" />
              )}
            </div>
            <div className="p-3">
              <p className="text-foreground text-sm font-medium">
                {item.title || <span className="text-muted-foreground">Card Title</span>}
              </p>
              {item.description && (
                <p className="text-muted-foreground mt-1 line-clamp-2 text-xs">
                  {item.description}
                </p>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
