import { WifiHigh, CookingPot, Car, SwimmingPool, Wind, TelevisionSimple } from "@phosphor-icons/react/dist/ssr";
import { StepProps } from "./types";
import { titleStyle, subtitleStyle, optionCardStyle, figtree } from "./styles";

export const PropertyAmenities = ({ data, updateData }: StepProps) => {
    const amenities = [
        { id: 'wifi', label: 'Wi-Fi', icon: WifiHigh },
        { id: 'kitchen', label: 'Kitchen', icon: CookingPot },
        { id: 'parking', label: 'Free parking', icon: Car },
        { id: 'pool', label: 'Pool', icon: SwimmingPool },
        { id: 'ac', label: 'Air conditioning', icon: Wind }, // Using House as placeholder for AC if needed
        { id: 'tv', label: 'TV', icon: TelevisionSimple },
    ];

    const toggleAmenity = (id: string) => {
        const current = data.amenities || [];
        const updated = current.includes(id)
            ? current.filter((item: string) => item !== id)
            : [...current, id];
        updateData('amenities', updated);
    };

    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>What does your place offer?</h2>
            <p className={subtitleStyle}>You can add more amenities after you publish.</p>
            <div className="grid grid-cols-2 gap-4">
                {amenities.map((amenity) => (
                    <button
                        key={amenity.id}
                        type="button"
                        onClick={() => toggleAmenity(amenity.id)}
                        className={`${optionCardStyle((data.amenities || []).includes(amenity.id))} items-start w-full text-left`}
                    >
                        <amenity.icon size={32} weight={(data.amenities || []).includes(amenity.id) ? "fill" : "regular"} />
                        <span className={`${figtree.className} text-lg font-medium`}>{amenity.label}</span>
                    </button>
                ))}
            </div>
        </div>
    )
}
