import { Package } from 'lucide-react'
import { cn } from '@/lib/utils'

interface Props {
  thumbPath: string | null
  alt: string
  size?: number
  className?: string
}

export function ItemThumb({ thumbPath, alt, size = 64, className }: Props) {
  if (!thumbPath) {
    return (
      <div
        className={cn(
          'rounded-lg bg-muted flex items-center justify-center shrink-0',
          className,
        )}
        style={{ width: size, height: size }}
        aria-label={alt}
      >
        <Package className="size-1/2 text-muted-foreground" />
      </div>
    )
  }
  return (
    /* eslint-disable-next-line @next/next/no-img-element */
    <img
      src={`/api/uploads/${thumbPath}`}
      alt={alt}
      width={size}
      height={size}
      loading="lazy"
      className={cn('rounded-lg object-cover bg-muted shrink-0', className)}
      style={{ width: size, height: size }}
    />
  )
}