import { Wind, Car, Bus, MapPin, Sofa } from "lucide-react";
import { House } from "@/src/config/apartments";

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

export function HouseHighlights({ house, locale }: HouseHighlightsProps) {
  const isHerdweg = house.id === "herdweg";

  const highlights = isHerdweg
    ? [
        {
          icon: Car,
          title: locale === "de" ? "Gleiche Straße wie Panzer Kaserne" : "Same Street as Panzer Kaserne",
          text: locale === "de" ? "Kein Abbiegen nötig" : "Zero turns needed",
          highlight: true,
        },
        {
          icon: Bus,
          title: locale === "de" ? "Bushaltestelle" : "Bus stop",
          text: locale === "de" ? "In der Nähe" : "Nearby",
        },
        {
          icon: Wind,
          title: locale === "de" ? "Klimaanlage" : "Air conditioning",
          text: locale === "de" ? "In den meisten Apartments" : "In most apartments",
        },
        {
          icon: Sofa,
          title: locale === "de" ? "Vollmöbliert" : "Fully furnished",
          text: locale === "de" ? "Alle Apartments" : "All apartments",
        },
      ]
    : [
        {
          icon: MapPin,
          title: locale === "de" ? "Stadtzentrum" : "City center",
          text: locale === "de" ? "Nahe gelegen" : "Close by",
        },
        {
          icon: Car,
          title: locale === "de" ? "Daimler Werk Sindelfingen" : "Daimler plant Sindelfingen",
          text: locale === "de" ? "Leicht erreichbar" : "Easy to reach",
        },
        {
          icon: Wind,
          title: locale === "de" ? "Klimaanlage" : "Air conditioning",
          text: locale === "de" ? "In allen Apartments" : "In all apartments",
        },
        {
          icon: Sofa,
          title: locale === "de" ? "Vollmöbliert" : "Fully furnished",
          text: locale === "de" ? "Alle Apartments" : "All apartments",
        },
      ];

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-5 mb-12">
      {highlights.map((highlight, index) => {
        const Icon = highlight.icon;
        return (
          <div
            key={index}
            className={`flex flex-col items-center text-center gap-4 p-6 rounded-2xl shadow-md hover:shadow-xl hover:-translate-y-1 transition-all ${
              highlight.highlight
                ? "bg-brand-green border-2 border-brand-green text-white"
                : "bg-white border-2 border-brand-green/20"
            }`}
          >
            <div
              className={`p-4 rounded-2xl shadow-sm ${
                highlight.highlight ? "bg-white text-brand-green" : "bg-brand-green text-white"
              }`}
            >
              <Icon className="w-9 h-9" />
            </div>
            <div>
              <p
                className={`font-bold text-xl leading-tight mb-1 ${
                  highlight.highlight ? "text-white" : "text-brand-grey-dark"
                }`}
              >
                {highlight.title}
              </p>
              <p className={`text-base font-medium ${highlight.highlight ? "text-white/90" : "text-brand-grey"}`}>
                {highlight.text}
              </p>
            </div>
          </div>
        );
      })}
    </div>
  );
}