import React, { useState } from 'react';

interface ProductVideos {
    mp4: string;
    webm: string;
}
interface ProductVideosProps {
    productVideo: ProductVideos;
    setProductVideo: React.Dispatch<React.SetStateAction<ProductVideos>>;
}

const VideoForm: React.FC<ProductVideosProps> = ({ productVideo, setProductVideo }) => {
    const handleChange = (form: string, value: string) => {
        setProductVideo((prev) => ({
            ...prev,
            [form]: String(value),
        }));
    };
    return (
        <>
            <div className="mb-4 text-lg">Product Videos : </div>
            <div className="mb-4   flex items-center justify-between sm:flex-wrap">
                <input id="mp4" type="text" name="mp4" className="form-input  w-full" placeholder="link video mp4" value={productVideo.mp4} onChange={(e) => handleChange('mp4', e.target.value)} />
            </div>
            <div className="mb-4  flex items-center justify-between sm:flex-wrap">
                <input id="webm" type="text" name="webm" className="form-input w-full" placeholder="link video webm" value={productVideo.webm} onChange={(e) => handleChange('webm', e.target.value)} />
            </div>
        </>
    );
};

export default VideoForm;