import Link from "next/link";
import Image from "next/image";
import { House } from "@/src/config/apartments";
import { MapPin, Home, ArrowRight, Wind, Car, Bus, Sofa } from "lucide-react";

interface HouseCardProps {
  house: House;
  locale: string;
}

export function HouseCard({ house, locale }: HouseCardProps) {
  const displayName = locale === "de" ? house.name : house.nameEn;
  const displayDescription =
    locale === "de" ? house.description : house.descriptionEn;
  const displayCountry = locale === "de" ? house.country : house.countryEn;

  return (
    <div className="group h-full bg-white rounded-3xl overflow-hidden shadow-sm border border-brand-grey-soft hover:shadow-2xl hover:shadow-brand-grey-dark/10 hover:-translate-y-2 transition-all duration-300 flex flex-col">
      <div className="relative h-72 overflow-hidden flex-shrink-0">
        <Image
          src={house.images[0] || "/images/placeholder.jpg"}
          alt={displayName}
          fill
          className="object-cover group-hover:scale-105 transition-transform duration-500"
        />
        <div className="absolute top-4 left-4">
          <span className="inline-flex items-center gap-1.5 bg-white/90 backdrop-blur-sm text-brand-green-dark text-sm font-semibold px-3 py-1.5 rounded-full">
            <Home className="w-4 h-4" />
            {house.apartments.length} {locale === "de" ? "Apartments" : "Apartments"}
          </span>
        </div>
      </div>
      <div className="p-7 flex flex-col flex-grow">
        <h3 className="text-2xl font-bold mb-3 text-brand-grey-dark group-hover:text-brand-green transition-colors">
          {displayName}
        </h3>
        <div className="flex flex-wrap gap-2 mb-4">
          {house.id === "herdweg" ? (
            <>
              <span className="inline-flex items-center gap-2 text-sm font-bold text-white bg-brand-green px-3 py-1.5 rounded-full shadow-sm">
                <Car className="w-5 h-5 flex-shrink-0" />
                <div className="flex flex-col leading-tight">
                  <span>
                    {locale === "de" ? "Gleiche Straße wie Panzer Kaserne" : "Same Street as Panzer Kaserne"}
                  </span>
                  <span className="text-xs font-medium text-white/85">
                    {locale === "de" ? "Kein Abbiegen nötig" : "Zero turns needed"}
                  </span>
                </div>
              </span>
              <span className="inline-flex items-center gap-1.5 text-sm font-bold text-brand-green-dark bg-brand-green/10 px-3 py-1.5 rounded-full">
                <Wind className="w-4 h-4" />
                {locale === "de" ? "Klimaanlage" : "Air conditioning"}
              </span>
            </>
          ) : (
            <>
              <span className="inline-flex items-center gap-1.5 text-sm font-bold text-brand-green-dark bg-brand-green/10 px-3 py-1.5 rounded-full">
                <MapPin className="w-4 h-4" />
                {locale === "de" ? "Nahe Stadtzentrum" : "Close to city center"}
              </span>
              <span className="inline-flex items-center gap-1.5 text-sm font-bold text-brand-green-dark bg-brand-green/10 px-3 py-1.5 rounded-full">
                <Wind className="w-4 h-4" />
                {locale === "de" ? "Klimaanlage" : "Air conditioning"}
              </span>
            </>
          )}
          {house.id === "herdweg" && (
            <span className="inline-flex items-center gap-1.5 text-sm font-bold text-brand-green-dark bg-brand-green/10 px-3 py-1.5 rounded-full">
              <Bus className="w-4 h-4" />
              {locale === "de" ? "Bus in der Nähe" : "Bus nearby"}
            </span>
          )}
          <span className="inline-flex items-center gap-1.5 text-sm font-bold text-brand-green-dark bg-brand-green/10 px-3 py-1.5 rounded-full">
            <Sofa className="w-4 h-4" />
            {locale === "de" ? "Vollmöbliert" : "Fully furnished"}
          </span>
        </div>
        <p className="text-brand-grey mb-5 leading-relaxed flex-grow">
          {displayDescription}
        </p>
        <div className="flex items-center gap-2 text-sm text-brand-grey mb-6">
          <MapPin className="w-4 h-4 text-brand-green" />
          <span>
            {house.city}, {displayCountry}
          </span>
        </div>
        <Link
          href={`/${locale}/houses/${house.slug}`}
          className="mt-auto inline-flex items-center justify-center gap-2 w-full bg-brand-green text-white font-semibold px-6 py-3.5 rounded-2xl hover:bg-brand-green-dark hover:shadow-lg transition-all"
        >
          {locale === "de" ? "Mehr erfahren" : "Learn more"}
          <ArrowRight className="w-4 h-4" />
        </Link>
      </div>
    </div>
  );
}