// MetadataEditor.jsx
import React, { useState } from 'react';
import { Input } from '@progress/kendo-react-inputs';
import { Label } from '@progress/kendo-react-labels';
import { Button } from '@progress/kendo-react-buttons';

function MetadataEditor({ postData }) {
    const [title, setTitle] = useState(postData?.title || '');
    const [tags, setTags] = useState(postData?.tags?.join(', ') || '');
    const [headerImage, setHeaderImage] = useState(postData?.header?.image || '');

    const handleTitleChange = (e) => {
        setTitle(e.target.value);
    };

    const handleTagsChange = (e) => {
        setTags(e.target.value);
    };

    const handleHeaderImageChange = (e) => {
        const file = e.target.files[0];
        if (file) {
            console.log('Header image uploaded:', file);
        }
    };


    return (
        <div style={{ padding: '20px', borderBottom: '1px solid #e0e0e0' }}>
            <div style={{ display: 'flex', gap: '20px', marginBottom: '15px', alignItems: 'center' }}>
                <div>
                    <input
                        type="file"
                        accept=".webp,.png,.jpg,.jpeg,.avif,.svg"
                        onChange={handleHeaderImageChange}
                        style={{ display: 'none' }}
                        id="header-image-upload"
                    />
                    <Button 
                        onClick={() => document.getElementById('header-image-upload').click()}
                    >
                        Upload Header Image
                    </Button>
                </div>

                <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: '10px' }}>
                    <Label style={{ minWidth: '60px' }}>Title</Label>
                    <Input 
                        value={title}
                        onChange={handleTitleChange}
                        placeholder="Enter post title"
                        style={{ flex: 1 }}
                    />
                </div>

                <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: '10px' }}>
                    <Label style={{ minWidth: '60px' }}>Tags</Label>
                    <Input 
                        value={tags}
                        onChange={handleTagsChange}
                        placeholder="Enter tags (comma separated)"
                        style={{ flex: 1 }}
                    />
                </div>
            </div>

        </div>
    );
}

export default MetadataEditor;