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

export const PropertyPrice = ({ data, updateData }: StepProps) => {
    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>Now, set your price</h2>
            <p className={subtitleStyle}>You can change it anytime.</p>
            <div className="flex flex-col gap-8 items-center py-12 bg-[#F7F7F7] border-2 border-black">
                <div className="relative w-full max-w-xs">
                    <span className="absolute left-4 top-1/2 -translate-y-1/2 text-4xl font-bold text-gray-400">₨</span>
                    <input
                        type="number"
                        placeholder="0"
                        className="w-full bg-transparent text-6xl font-bold text-center outline-none p-4"
                        value={data.price || ''}
                        onChange={(e) => updateData('price', e.target.value)}
                    />
                </div>
                <p className={`${figtree.className} text-xl text-gray-500`}>per night</p>
            </div>
        </div>
    )
}
