"use client"

import { useState, useEffect } from "react";
import { X } from "lucide-react";
import { Amenity } from "./types";

interface AmenitiesProps {
    amenities: Amenity[];
}

export function Amenities({ amenities }: AmenitiesProps) {
    const [showAmenities, setShowAmenities] = useState(false);

    useEffect(() => {
        if (showAmenities) {
            document.body.style.overflow = 'hidden';
        } else {
            document.body.style.overflow = 'unset';
        }
        return () => {
            document.body.style.overflow = 'unset';
        };
    }, [showAmenities]);

    return (
        <div className="pb-8 border-b-2 border-gray-100">
            <h3 className="text-2xl font-medium mb-6">What this place offers</h3>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                {amenities.slice(0, 6).map((item, idx) => (
                    <div key={idx} className="flex items-center gap-4 p-4 border-2 border-gray-100 hover:border-black transition-colors">
                        <item.icon className="w-6 h-6" />
                        <span className="text-lg font-light">{item.label}</span>
                    </div>
                ))}
            </div>
            <button
                onClick={() => setShowAmenities(true)}
                className="mt-6 px-6 py-3 border-2 border-black font-medium hover:bg-[#E7FE78] transition-colors"
            >
                Show all {amenities.length} amenities
            </button>

            {/* Amenities Modal */}
            {showAmenities && (
                <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
                    <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setShowAmenities(false)} />
                    <div className="relative bg-white w-full max-w-2xl max-h-[85vh] rounded-xl shadow-2xl flex flex-col animate-in fade-in zoom-in duration-200">
                        <div className="flex items-center justify-between p-6 border-b">
                            <h2 className="text-2xl font-medium">What this place offers</h2>
                            <button
                                onClick={() => setShowAmenities(false)}
                                className="p-2 hover:bg-gray-100 rounded-full transition-colors"
                            >
                                <X className="w-5 h-5" />
                            </button>
                        </div>
                        <div className="p-6 overflow-y-auto flex-1">
                            <div className="space-y-8">
                                {Array.from(new Set(amenities.map(a => a.category))).map(category => (
                                    <div key={category}>
                                        <h3 className="font-medium text-lg mb-4">{category}</h3>
                                        <div className="space-y-4">
                                            {amenities.filter(a => a.category === category).map((item, idx) => (
                                                <div key={idx} className="flex items-center gap-4 pb-4 border-b border-gray-50 last:border-0">
                                                    <item.icon className="w-6 h-6 text-gray-600" />
                                                    <span className="text-lg font-light">{item.label}</span>
                                                </div>
                                            ))}
                                        </div>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );
}
