import Link from "next/link";
import { Users, Key, Heart } from "lucide-react";

interface CarRentalData {
  id: number;
  name: string;
  type: string | null;
  capacity: string | null;
  price: string | null;
  imageUrl: string | null;
  includeDriver: boolean;
}

const FALLBACK_IMAGE =
  "https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=800&q=80";

export function CarRentalCard({ car }: { car: CarRentalData }) {
  const currentPriceNumeric =
    car.price && !isNaN(Number(car.price)) ? Number(car.price) : 0;
  const currentPrice =
    currentPriceNumeric > 0
      ? `Rp ${currentPriceNumeric.toLocaleString("id-ID")}`
      : car.price;

  return (
    <div className="group flex flex-col h-full overflow-hidden rounded-[24px] bg-white border border-gray-100 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 relative p-6">
      <div className="flex items-center justify-end mb-2">
        <button className="text-gray-300 hover:text-[#d32f2f] transition-colors">
          <Heart className="w-5 h-5" />
        </button>
      </div>

      <div className="relative h-40 overflow-hidden rounded-xl my-4 group-hover:scale-105 transition-transform duration-700">
        <Link href={`/car-rental/${car.id}`} className="block h-full w-full">
          <img
            src={car.imageUrl || FALLBACK_IMAGE}
            alt={car.name}
            className="h-full w-full object-cover"
          />
        </Link>
      </div>

      <div className="flex flex-col flex-1">
        <Link href={`/car-rental/${car.id}`} className="block mb-4">
          <h3 className="text-lg font-bold text-slate-900 group-hover:text-[#d32f2f] transition-colors">
            {car.name}
          </h3>
        </Link>

        <div className="flex items-center gap-4 text-[12px] text-gray-500 font-medium mb-6">
          {car.capacity && (
            <div className="flex items-center gap-1.5">
              <Users className="w-4 h-4 text-gray-400" />
              <span>{car.capacity}</span>
            </div>
          )}
          {car.type && (
            <div className="flex items-center gap-1.5">
              <span>{car.type}</span>
            </div>
          )}
          <div className="flex items-center gap-1.5">
            <Key className="w-4 h-4 text-gray-400" />
            <span>{car.includeDriver ? "Dengan Sopir" : "Lepas Kunci"}</span>
          </div>
        </div>

        <div className="flex items-end justify-between mt-auto">
          <div>
            <p className="text-[10px] uppercase tracking-wider text-gray-400 mb-1">Mulai dari</p>
            <p className="text-[16px] font-extrabold text-[#d32f2f] leading-none">
              {currentPrice || "Hubungi Kami"}
            </p>
          </div>

          <Link
            href={`/car-rental/${car.id}`}
            className="px-4 py-2 text-[12px] font-bold rounded-lg border border-red-200 text-[#d32f2f] hover:bg-red-50 hover:border-[#d32f2f] transition-colors"
          >
            Lihat Detail
          </Link>
        </div>
      </div>
    </div>
  );
}