import Link from "next/link";
import type { Car } from "@/lib/data";

interface Props {
  readonly car: Car;
  readonly size?: "sm" | "md";
}

const CAR_SVG = (
  <svg viewBox="0 0 120 60" fill="none" className="w-full h-full text-gray-300" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 38h100v8a4 4 0 01-4 4H14a4 4 0 01-4-4v-8z" fill="currentColor" opacity=".15"/>
    <path d="M14 38l10-18h62l10 18H14z" fill="currentColor" opacity=".25"/>
    <path d="M26 38l6-12h56l6 12H26z" fill="currentColor" opacity=".18"/>
    <rect x="22" y="26" width="18" height="10" rx="2" fill="currentColor" opacity=".3"/>
    <rect x="80" y="26" width="18" height="10" rx="2" fill="currentColor" opacity=".3"/>
    <circle cx="28" cy="46" r="8" fill="currentColor" opacity=".4"/>
    <circle cx="28" cy="46" r="4" fill="white" opacity=".6"/>
    <circle cx="92" cy="46" r="8" fill="currentColor" opacity=".4"/>
    <circle cx="92" cy="46" r="4" fill="white" opacity=".6"/>
  </svg>
);

export default function CarCard({ car, size = "md" }: Props) {
  const isSmall = size === "sm";

  return (
    <Link href={`/cars/${car.id}`} className={`car-card flex flex-col ${isSmall ? "w-44" : "w-52"} flex-shrink-0`}>
      {/* Image area */}
      <div className={`relative bg-gradient-to-br from-[#141414] to-[#1a1a1a] flex items-center justify-center ${isSmall ? "h-28" : "h-32"} px-4`}>
        {car.badge === "sale" && (
          <span className="badge-sale absolute top-2 left-2">
            ☀️ {car.discountPct}% OFF
          </span>
        )}
        {car.badge === "new" && (
          <span className="badge-new absolute top-2 left-2">
            🌟 New
          </span>
        )}
        {car.badge === "top" && (
          <span className="badge-top absolute top-2 left-2">
            ⭐ Top Pick
          </span>
        )}
        <div className={`w-full ${isSmall ? "h-16" : "h-20"}`}>{CAR_SVG}</div>
      </div>

      {/* Info */}
      <div className="p-3 flex flex-col gap-1.5 flex-1">
        <p className={`font-semibold text-[#1a1f2e] leading-tight ${isSmall ? "text-xs" : "text-xs"}`}>
          {car.name} <span className="text-[#5c6472] font-normal">({car.color}), {car.year}</span>
        </p>

        <div className="flex items-center gap-1.5 flex-wrap">
          {car.originalPrice ? (
            <>
              <span className="text-brand font-bold text-sm">AED {car.priceDay.toLocaleString()}</span>
              <span className="text-[#5c6472] line-through text-xs">AED {car.originalPrice.toLocaleString()}</span>
            </>
          ) : (
            <span className="text-brand font-bold text-sm">AED {car.priceDay.toLocaleString()}</span>
          )}
          <span className="text-[#5c6472] text-xs">/day</span>
        </div>

        {/* Meta */}
        <div className="flex items-center gap-2 text-xs text-[#5c6472]">
          <span>👤 {car.seats}</span>
          <span>⚙️ {car.transmission}</span>
        </div>
      </div>
    </Link>
  );
}