import Image from 'next/image'
import { listingImage, stageCode } from '@/lib/listing-view'
import type { ListingWithRelations } from '@/lib/listings'

/** Imagen del lugar relacionada al activo, con etiqueta mono y código de etapa. */
export function ListingThumb({
  listing,
  height = 180,
  label,
  corner,
  sizes = '(max-width: 768px) 100vw, 360px',
  priority = false,
  rounded = false,
}: {
  listing: ListingWithRelations
  height?: number
  label?: string
  corner?: string
  sizes?: string
  priority?: boolean
  rounded?: boolean
}) {
  const src = listingImage(listing)
  const bottomLabel = label ?? [listing.region, listing.city].filter(Boolean).join(' · ')
  const cornerText = corner ?? stageCode(listing.stage)
  return (
    <div
      style={{
        position: 'relative',
        height,
        overflow: 'hidden',
        background: 'var(--bg-sunk)',
        borderRadius: rounded ? 2 : 0,
      }}
    >
      <Image
        src={src}
        alt={`${listing.title} — ${bottomLabel}`}
        fill
        sizes={sizes}
        priority={priority}
        style={{ objectFit: 'cover', filter: 'saturate(0.95) contrast(1.02)' }}
      />
      {/* scrim inferior para legibilidad de la etiqueta */}
      <div
        style={{
          position: 'absolute',
          inset: 0,
          background: 'linear-gradient(180deg, rgba(15,12,8,0.18) 0%, transparent 30%, transparent 60%, rgba(15,12,8,0.5) 100%)',
        }}
      />
      {cornerText && (
        <div
          className="mono uppercase-wide"
          style={{
            position: 'absolute',
            top: 8,
            right: 8,
            fontSize: 10,
            padding: '3px 6px',
            background: 'rgba(20,20,20,0.72)',
            color: '#f6f3ee',
            letterSpacing: '0.08em',
          }}
        >
          {cornerText}
        </div>
      )}
      {bottomLabel && (
        <div
          className="mono uppercase-wide"
          style={{
            position: 'absolute',
            inset: 'auto 0 0 0',
            padding: '6px 10px',
            fontSize: 10,
            letterSpacing: '0.08em',
            color: '#f6f3ee',
            display: 'flex',
            justifyContent: 'space-between',
            gap: 8,
          }}
        >
          <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
            {bottomLabel}
          </span>
        </div>
      )}
    </div>
  )
}