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

export const PropertyType = ({ data, updateData }: StepProps) => {
    const types = [
        { id: 'house', label: 'House', icon: House },
        { id: 'flat', label: 'Flat', icon: Buildings },
        { id: 'farmhouse', label: 'Farmhouse', icon: Farm },
        { id: 'guesthouse', label: 'Guesthouse', icon: Bed },
    ];

    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>What kind of place will you host?</h2>
            <p className={subtitleStyle}>Select the category that best describes your property.</p>
            <div className="grid grid-cols-2 gap-4">
                {types.map((type) => (
                    <button
                        key={type.id}
                        type="button"
                        onClick={() => updateData('propertyType', type.id)}
                        className={optionCardStyle(data.propertyType === type.id)}
                    >
                        <type.icon size={48} weight={data.propertyType === type.id ? "fill" : "light"} />
                        <span className={`${figtree.className} text-xl font-medium`}>{type.label}</span>
                    </button>
                ))}
            </div>
        </div>
    )
}
