import React, { useState } from 'react';

interface Product3D {
    src: string;
    env: string;
    poster: string;
}
interface Product3DProps {
    product3D: Product3D;
    setProduct3D: React.Dispatch<React.SetStateAction<Product3D>>;
}

const Product3DForm: React.FC<Product3DProps> = ({ product3D, setProduct3D }) => {
    const handleChange = (form: string, value: string) => {
        setProduct3D((prev) => ({
            ...prev,
            [form]: String(value),
        }));
    };
    return (
        <>
            <div className="mb-4 text-lg">Product 3D : </div>
            <div className="mb-4   flex items-center justify-between sm:flex-wrap">
                <input id="src" type="text" name="src" className="form-input  w-full" placeholder=".obj model" value={product3D.src} onChange={(e) => handleChange('src', e.target.value)} />
            </div>
            <div className="mb-4  flex items-center justify-between sm:flex-wrap">
                <input id="env" type="text" name="env" className="form-input  w-full" placeholder="envrironment .hdr" value={product3D.env} onChange={(e) => handleChange('env', e.target.value)} />
            </div>
            <div className="mb-4  flex items-center justify-between sm:flex-wrap">
                <input
                    id="poster"
                    type="text"
                    name="poster"
                    className="form-input  w-full"
                    placeholder="poster .webp"
                    value={product3D.poster}
                    onChange={(e) => handleChange('poster', e.target.value)}
                />
            </div>
        </>
    );
};

export default Product3DForm;