import {
  Tv,
  Wifi,
  CookingPot,
  Coffee,
  Waves,
  Car,
  CreditCard,
  PawPrint,
} from "lucide-react";

const amenities = [
  { icon: Wifi, label: "WiFi" },
  { icon: CookingPot, label: "Aneks kuchenny" },
  { icon: Tv, label: "Telewizor" },
  { icon: Coffee, label: "Czajnik elektryczny" },
  { icon: Waves, label: "Sprzęt plażowy" },
  { icon: Car, label: "Parking" },
  { icon: CreditCard, label: "Płatność kartą" },
  { icon: PawPrint, label: "Zwierzęta mile widziane" },
];

export function Amenities() {
  return (
    <section id="amenities" className="py-24 bg-background">
      <div className="container mx-auto px-6">
        <div className="text-center mb-16">
          <p className="text-primary uppercase tracking-[0.2em] text-sm font-medium mb-4">
            Wyposażenie pokoi i domków
          </p>
          <p className="text-muted-foreground max-w-2xl mx-auto">
            Każdy domek i pokój wyposażony jest w prywatną łazienkę, balkon lub taras, lodówkę, zastawę stołową i wszystko co potrzebne do komfortowego wypoczynku.
          </p>
        </div>

        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6 max-w-5xl mx-auto">
          {amenities.map((amenity) => (
            <div
              key={amenity.label}
              className="flex flex-col items-center text-center p-6 rounded-2xl bg-card border border-border hover:border-primary/30 hover:shadow-md transition-all group"
            >
              <div className="w-14 h-14 rounded-full bg-secondary flex items-center justify-center mb-4 group-hover:bg-accent transition-colors">
                <amenity.icon className="w-6 h-6 text-primary" />
              </div>
              <span className="text-sm text-foreground font-medium">{amenity.label}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}