import Image from 'next/image';
import Link from 'next/link';
import { Heart } from 'lucide-react';
import { Listing } from '@/lib/types';

export function ListingCard({ listing }: { listing: Listing }) {
  return (
    <Link href={`/item/${listing.id}`} className="listing-card">
      <div className="listing-image-wrap">
        <Image src={listing.image} alt={listing.title} fill className="listing-image" />
        <button className="heart-button" aria-label="Save listing">
          <Heart size={16} />
        </button>
      </div>
      <div className="listing-meta">
        <div className="listing-price">£{listing.price}</div>
        <div className="listing-title">{listing.title}</div>
        <div className="listing-sub">by {listing.seller} • {listing.condition}</div>
      </div>
    </Link>
  );
}