import Link from "next/link";
import Image from "next/image";
import { Apartment } from "@/src/config/apartments";
import { Users, ArrowRight, Wind } from "lucide-react";

interface ApartmentCardProps {
  apartment: Apartment;
  locale: string;
}

export function ApartmentCard({ apartment, locale }: ApartmentCardProps) {
  const displayName = locale === "de" ? apartment.name : apartment.nameEn;
  const displayFloor = locale === "de" ? apartment.floor : apartment.floorEn;
  const hasAc = apartment.amenities.some((a) => a.toLowerCase().includes("klimaanlage"));

  return (
    <div className="bg-white rounded-2xl overflow-hidden shadow-sm border border-brand-grey-soft hover:shadow-lg transition-shadow">
      <div className="relative h-48">
        <Image
          src={apartment.images[0] || "/images/placeholder.jpg"}
          alt={displayName}
          fill
          className="object-cover"
        />
        <div
          className={`absolute top-3 right-3 flex items-center gap-1.5 text-xs font-semibold px-2.5 py-1.5 rounded-full backdrop-blur-sm ${
            hasAc ? "bg-brand-green/90 text-white" : "bg-white/90 text-brand-grey"
          }`}
          title={
            hasAc
              ? locale === "de"
                ? "Klimaanlage vorhanden"
                : "Air conditioning available"
              : locale === "de"
              ? "Keine Klimaanlage"
              : "No air conditioning"
          }
        >
          <Wind className={`w-3.5 h-3.5 ${hasAc ? "" : "opacity-40"}`} />
          {hasAc
            ? locale === "de"
              ? "Klimaanlage"
              : "AC"
            : locale === "de"
            ? "Keine Klimaanlage"
            : "No AC"}
        </div>
      </div>
      <div className="p-5">
        <h3 className="text-xl font-bold mb-1 text-brand-grey-dark">
          {displayName}
        </h3>
        <p className="text-brand-grey-light text-sm mb-4">{displayFloor}</p>
        <div className="flex items-center gap-2 text-sm text-brand-grey mb-4">
          <Users className="w-4 h-4 text-brand-green" />
          <span>
            {apartment.maxGuests} {locale === "de" ? "Gäste" : "guests"}
          </span>
        </div>
        <Link
          href={`/${locale}/apartments/${apartment.slug}`}
          className="inline-flex items-center gap-2 text-brand-green-dark font-medium hover:text-brand-green transition-colors"
        >
          {locale === "de" ? "Details ansehen" : "View details"}
          <ArrowRight className="w-4 h-4" />
        </Link>
      </div>
    </div>
  );
}