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

export const PropertyLocation = ({ data, updateData }: StepProps) => {
    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>Where's your place located?</h2>
            <p className={subtitleStyle}>Your address is only shared with guests after they've made a reservation.</p>
            <div className="flex flex-col gap-6">
                <div className="relative">
                    <MapPin size={24} className="absolute left-4 top-1/2 -translate-y-1/2 text-gray-500" />
                    <input
                        type="text"
                        placeholder="Enter your address"
                        className={`${inputStyle} pl-12`}
                        value={data.location || ''}
                        onChange={(e) => updateData('location', e.target.value)}
                    />
                </div>
                <div className="w-full h-80 bg-gray-100 border-2 border-black flex flex-col items-center justify-center gap-4 relative overflow-hidden group">
                    <div className="absolute inset-0 opacity-10 bg-[radial-gradient(#000_1px,transparent_1px)] [background-size:16px_16px]" />
                    <MapPin size={48} className="text-gray-400 group-hover:text-black transition-colors duration-300" weight="fill" />
                    <span className={`${figtree.className} text-gray-500 font-medium`}>Map Preview</span>
                </div>
            </div>
        </div>
    )
}
