import { Link } from "@tanstack/react-router";
import { ArrowUpRight, MapPin, BedDouble } from "lucide-react";
import type { Property } from "@/lib/properties";

export function PropertyCard({ property, priority = false }: { property: Property; priority?: boolean }) {
  return (
    <Link
      to="/properties/$slug"
      params={{ slug: property.slug }}
      className="group relative flex flex-col overflow-hidden rounded-2xl bg-card border border-border transition hover:border-foreground/30"
    >
      <div className="relative aspect-[4/5] overflow-hidden bg-muted">
        <img
          src={property.image}
          alt={`${property.name} — ${property.location}`}
          loading={priority ? "eager" : "lazy"}
          width={1200}
          height={1400}
          className="h-full w-full object-cover transition-transform duration-[900ms] ease-out group-hover:scale-105"
        />
        <div className="absolute inset-x-0 top-0 flex items-start justify-between p-4">
          <span className="rounded-full bg-background/90 px-3 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.18em] backdrop-blur">
            {property.status}
          </span>
          <span className="rounded-full bg-gold/95 px-3 py-1 text-[0.65rem] font-semibold uppercase tracking-[0.18em] text-ink">
            From {property.priceFrom}
          </span>
        </div>
      </div>
      <div className="flex flex-col gap-3 p-5">
        <div className="flex items-start justify-between gap-2">
          <div>
            <h3 className="font-display text-lg font-semibold leading-tight">{property.name}</h3>
            <p className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground">
              <MapPin className="h-3.5 w-3.5" /> {property.location}
            </p>
          </div>
          <span className="mt-1 inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-border transition group-hover:bg-foreground group-hover:text-background">
            <ArrowUpRight className="h-4 w-4" />
          </span>
        </div>
        <p className="text-sm text-muted-foreground line-clamp-2">{property.tagline}</p>
        <div className="mt-auto flex items-center gap-4 pt-3 text-xs text-muted-foreground border-t border-border">
          <span className="flex items-center gap-1.5"><BedDouble className="h-3.5 w-3.5" /> {property.bedrooms}</span>
          <span>{property.type}</span>
          <span className="ml-auto">Handover {property.handover}</span>
        </div>
      </div>
    </Link>
  );
}