import Link from 'next/link'
import { Pencil } from 'lucide-react'
import { StatusBadge } from './StatusBadge'

interface ImageLite {
  path: string
  alt?: string | null
  isCover: boolean
}

interface ListingLite {
  id: string
  title: string
  priceUsd?: unknown // Prisma Decimal
  status: string
}

export function ListingCard({ listing, images }: { listing: ListingLite; images: ImageLite[] }) {
  const cover = images.find((i) => i.isCover) || images[0]
  const price = listing.priceUsd ? Number(listing.priceUsd) : null

  return (
    <div className="bg-white rounded-lg shadow-sm overflow-hidden border border-gray-200">
      <div className="aspect-video bg-gray-100 relative">
        {cover ? (
          // eslint-disable-next-line @next/next/no-img-element
          <img
            src={cover.path}
            alt={cover.alt || listing.title}
            className="w-full h-full object-cover"
          />
        ) : (
          <div className="w-full h-full flex items-center justify-center text-gray-400 text-sm">
            No images
          </div>
        )}
        <div className="absolute top-2 right-2">
          <StatusBadge status={listing.status} />
        </div>
      </div>
      <div className="p-4">
        <h3 className="font-semibold text-[#1D2019] truncate">{listing.title}</h3>
        {price !== null && (
          <p className="text-sm text-gray-600">${price.toLocaleString()} USD</p>
        )}
        <div className="mt-3 flex justify-between items-center">
          <span className="text-xs text-gray-500">
            {images.length} {images.length === 1 ? 'photo' : 'photos'}
          </span>
          <Link
            href={`/agent/listings/${listing.id}/edit`}
            className="flex items-center gap-1 text-sm text-[#374527] hover:underline"
          >
            <Pencil size={14} />
            Edit
          </Link>
        </div>
      </div>
    </div>
  )
}