import { Camera, Upload } from "lucide-react";
import { useRef, useState } from "react";
 
function App() {
    const [formData, setFormData] = useState({
        image: null,
    });
    const fileInputRef = useRef(null);
    const [imagePreview, setImagePreview] = useState(null);
 
    const handleSubmit = (e) => {
    // form submission logic will go here ....
    };
 
    const handleChange = (e) => {
        // input fileds change logic will go here ....
    };
 
    return (
        <div className='min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50 py-12 px-4 sm:px-6 lg:px-8'>
            <div className='max-w-2xl mx-auto'>
                <div className='bg-white rounded-2xl shadow-xl p-8'>
                    <div className='flex items-center gap-3 mb-8'>
                        <Hotel className='h-8 w-8 text-indigo-600' />
                        <h1 className='text-3xl font-bold text-gray-900'>
                            Your Image Uploader
                        </h1>
                    </div>
 
                    <form onSubmit={handleSubmit} className='space-y-6'>
 
                        <div>
                            <label className='block text-sm font-medium text-gray-700 mb-2'>
                                <div className='flex items-center gap-2'>
                                    <Camera className='h-4 w-4 text-gray-500' />
                                        Upload Image
                                </div>
                            </label>
                            <div
                                onClick={() => fileInputRef.current?.click()}
                                className='mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer hover:border-indigo-500 transition-colors duration-200'>
                                <div className='space-y-1 text-center'>
                                    <Upload className='mx-auto h-12 w-12 text-gray-400' />
                                    <div className='flex text-sm text-gray-600'>
                                        <label className='relative cursor-pointer rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-indigo-500'>
                                            <span>Upload a file</span>
                                            <input
                                                ref={fileInputRef}
                                                type='file'
                                                className='sr-only'
                                                accept='image/*'
                                                required
                                            />
                                        </label>
                                        <p className='pl-1'>or drag and drop</p>
                                    </div>
                                    <p className='text-xs text-gray-500'>
                                        PNG, JPG, GIF up to 10MB
                                    </p>
                                </div>
                            </div>
                        </div>
 
                        {imagePreview && (
                            <div className='mt-4'>
                                <p className='text-sm font-medium text-gray-700 mb-2'>
                                    Preview
                                </p>
                                <div className='relative h-48 rounded-lg overflow-hidden'>
                                    <img
                                        src={imagePreview}
                                        alt='Hotel preview'
                                        className='w-full h-full object-cover'
                                    />
                                </div>
                            </div>
                        )}
 
                        <div className='pt-4'>
                            <button
                                type='submit'
                                className='w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200'>
                                Submit
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    );
}
 
export default App;