import Link from "next/link";
import { Plane } from "lucide-react";

interface FlightData {
  id: number;
  airline: string;
  flightNumber: string | null;
  origin: string;
  destination: string;
  departureInfo: string | null;
  price: string | null;
  badge: string | null;
  imageUrl: string | null;
}

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

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

  return (
    <div className="group flex flex-col h-full overflow-hidden rounded-[20px] bg-white border border-gray-100 shadow-sm transition-all hover:shadow-xl hover:-translate-y-1 relative">
      <div className="relative h-40 overflow-hidden bg-gray-100">
        <Link href={`/flight/${flight.id}`} className="block h-full w-full">
          <img
            src={flight.imageUrl || FALLBACK_IMAGE}
            alt={flight.airline}
            className="h-full w-full object-cover transition-transform duration-700 group-hover:scale-110"
          />
        </Link>
        {flight.badge && (
          <span className="absolute top-3 left-3 bg-[#d32f2f] text-white text-[10px] font-bold px-3 py-1 rounded-full shadow-md">
            {flight.badge}
          </span>
        )}
      </div>

      <div className="flex flex-col flex-1 p-5">
        <div className="mb-1">
          <span className="text-[13px] font-bold text-slate-800">
            {flight.airline}
          </span>
          {flight.flightNumber && (
            <span className="text-[12px] text-slate-400"> · {flight.flightNumber}</span>
          )}
        </div>
        <div className="flex items-center gap-2 mb-4 text-[13px] text-slate-600">
          <span className="truncate">{flight.origin}</span>
          <Plane className="w-3.5 h-3.5 text-slate-400 shrink-0" />
          <span className="truncate">{flight.destination}</span>
        </div>

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

          <Link
            href={`/flight/${flight.id}`}
            className="w-8 h-8 rounded-full border border-gray-200 flex items-center justify-center text-gray-500 hover:bg-[#d32f2f] hover:text-white hover:border-[#d32f2f] transition-colors shadow-sm"
          >
            <Plane className="w-3.5 h-3.5" />
          </Link>
        </div>
      </div>
    </div>
  );
}