import Image from "next/image";
import Link from "next/link";
import { Heart, Star } from "lucide-react";
import type { Listing } from "@/lib/listings";

export function ListingCard({ listing }: { listing: Listing }) {
  return (
    <article className="group overflow-hidden rounded-3xl bg-card shadow-soft transition duration-300 hover:-translate-y-1 hover:shadow-lift">
      <div className="relative aspect-[4/3] overflow-hidden">
        <Image src={listing.image} alt={listing.name} fill className="object-cover transition duration-500 group-hover:scale-105" sizes="(max-width: 768px) 100vw, 33vw" />
        <button type="button" aria-label={`Save ${listing.name}`} className="absolute right-4 top-4 grid size-10 place-items-center rounded-full bg-white/90 shadow-soft">
          <Heart size={18} />
        </button>
      </div>
      <Link href={`/listings/${listing.id}`} className="block p-5">
        <div className="flex items-start justify-between gap-3">
          <div>
            <h3 className="text-lg font-bold">{listing.name}</h3>
            <p className="mt-1 text-sm text-muted-foreground">{listing.location}</p>
          </div>
          <span className="flex items-center gap-1 text-sm font-bold"><Star size={14} className="fill-ember text-ember" />{listing.rating}</span>
        </div>
        <div className="mt-5 flex items-end justify-between border-t border-border/70 pt-4">
          <p><span className="text-lg font-bold">${listing.price}</span><span className="text-sm text-muted-foreground"> / night</span></p>
          <p className="text-xs text-muted-foreground">{listing.bedrooms} beds · {listing.guests} guests</p>
        </div>
      </Link>
    </article>
  );
}