import { CheckCircle } from "@phosphor-icons/react/dist/ssr";
import { StepProps } from "./types";
import { titleStyle, subtitleStyle, optionCardStyle, figtree } from "./styles";

export const PropertyPlaceType = ({ data, updateData }: StepProps) => {
    const places = [
        { id: 'entire', label: 'An entire place', description: 'Guests have the entire property to themselves, with full privacy and unrestricted access.' },
        { id: 'room', label: 'A room', description: 'Guests have their own private room within the home, along with comfortable access to shared spaces.' },
        { id: 'shared', label: 'A shared room', description: 'Guests sleep in a room or common area that may be shared with others.' },
    ];

    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>What type of place will guests have?</h2>
            <p className={subtitleStyle}>Choose the level of privacy your guests will enjoy.</p>
            <div className="flex flex-col gap-4">
                {places.map((place) => (
                    <button
                        key={place.id}
                        type="button"
                        onClick={() => updateData('placeType', place.id)}
                        className={`${optionCardStyle(data.placeType === place.id)} flex-row justify-between text-left items-center w-full p-6`}
                    >
                        <div className="flex flex-col gap-1">
                            <span className={`${figtree.className} text-xl font-bold`}>{place.label}</span>
                            <span className={`${figtree.className} text-gray-600`}>{place.description}</span>
                        </div>
                        {data.placeType === place.id && <CheckCircle size={32} weight="fill" />}
                    </button>
                ))}
            </div>
        </div>
    )
}
