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

export const PropertyDescription = ({ data, updateData }: StepProps) => {
    return (
        <div className="flex flex-col">
            <h2 className={titleStyle}>How would you describe your place?</h2>
            <p className={subtitleStyle}>Short and sweet works best.</p>
            <div className="flex flex-col gap-6">
                <div>
                    <label className="block text-sm font-bold mb-2">Title</label>
                    <input
                        type="text"
                        placeholder="e.g. Cozy Cottage in the Hills"
                        className={inputStyle}
                        value={data.title || ''}
                        onChange={(e) => updateData('title', e.target.value)}
                    />
                </div>
                <div>
                    <label className="block text-sm font-bold mb-2">Description</label>
                    <textarea
                        placeholder="This unique place has a style all its own..."
                        className={`${inputStyle} h-48 resize-none`}
                        value={data.description || ''}
                        onChange={(e) => updateData('description', e.target.value)}
                    />
                </div>
            </div>
        </div>
    )
}
