import { StepProps, FormData } from "./types";
import { titleStyle, subtitleStyle, figtree } from "./styles";

export const PropertyCapacity = ({ data, updateData }: StepProps) => {
    const counters: { key: keyof FormData; label: string }[] = [
        { key: 'guests', label: 'Guests' },
        { key: 'bedrooms', label: 'Bedrooms' },
        { key: 'beds', label: 'Beds' },
        { key: 'bathrooms', label: 'Bathrooms' },
    ];

    const updateCount = (key: keyof FormData, delta: number) => {
        const current = (data[key] as number) || 0;
        updateData(key, Math.max(0, current + delta));
    };

    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>Share some basics about your place</h2>
            <p className={subtitleStyle}>You'll add more details later, like bed types.</p>
            <div className="flex flex-col gap-6">
                {counters.map((item) => (
                    <div key={item.key} className="flex items-center justify-between border-b-2 border-gray-100 pb-6">
                        <span className={`${figtree.className} text-xl font-medium`}>{item.label}</span>
                        <div className="flex items-center gap-6">
                            <button
                                type="button"
                                onClick={() => updateCount(item.key, -1)}
                                disabled={!data[item.key]}
                                className="w-12 h-12 rounded-full border-2 border-black flex items-center justify-center hover:bg-gray-100 disabled:opacity-30 disabled:hover:bg-transparent transition-colors"
                            >
                                <span className="text-2xl mb-1">-</span>
                            </button>
                            <span className={`${figtree.className} text-xl w-8 text-center font-bold`}>{data[item.key] || 0}</span>
                            <button
                                type="button"
                                onClick={() => updateCount(item.key, 1)}
                                className="w-12 h-12 rounded-full border-2 border-black flex items-center justify-center hover:bg-gray-100 transition-colors"
                            >
                                <span className="text-2xl mb-1">+</span>
                            </button>
                        </div>
                    </div>
                ))}
            </div>
        </div>
    )
}
