'use client'
import { Button } from '@nextui-org/button';
import { Textarea } from '@nextui-org/input';
import { useState } from 'react';

export default function FormReport() {

    const [formData, setFormData] = useState({
        date: '',
        location: '',
        attachment: '',
        complaint: '',
        complaintLink: '',
        voiceNote: '',
    });

    const handleChange = (e: any) => {
        const { name, value } = e.target;
        setFormData((prevData) => ({
            ...prevData,
            [name]: value,
        }));
    }

    const handleDateChange = (e: any) => {
        const { value } = e.target;
        setFormData((prevData) => ({
            ...prevData,
            date: value,
        }));
    };

    const handleSubmit = () => {
        console.log('Data formulir yang dikirim:', formData);
    };

    return (
        <div className='mx-2 md:mx-24'>
            <div className='text-[#1A328E] font-bold text-center'>
                <p className='text-3xl pt-3'>Lapor Pelanggan Pemilu</p>
                <p className='text-sm pt-5'>Portal Laporan Pengaduan Online Pelanggaran Pemilu</p>
            </div>
            <div className='space-y-5  container mx-auto pt-10'>
                <div>
                    <p>Tanggal</p>
                    <input
                        className='w-full border-2 rounded-md p-1 mt-2 bg-transparent'
                        type="date"
                        name='date'
                        value={formData.date}
                        onChange={handleDateChange}
                    />
                </div>
                {/* <div>
                    <p>Lokasi Kejadian</p>
                </div> */}
                <div>
                    <p>Lampiran Aduan</p>
                    <input className='border-2 w-full mt-2' type="file" accept="image/*, text/*" name="file" />
                </div>
                <div>
                    <p>Isi Aduan</p>
                    <Textarea
                        placeholder="Masukkan Link Pendukung"
                        className="w-full  mt-2"
                        variant='bordered'
                        name='complaint'
                        value={formData.complaint}
                        onChange={handleChange}
                    />
                </div>
                <div>
                    <p>Link Pengaduan</p>
                    <Textarea
                        placeholder="Masukkan Link Pendukung"
                        className="w-full mt-2"
                        variant='bordered'
                        name='complaintLink'
                        value={formData.complaintLink}
                        onChange={handleChange}
                    />
                </div>
                {/* <div>
                    <p>Voice Note</p>
                </div> */}
                <div>
                    <Button
                        className='bg-[#1A328E]  w-full my-4 text-white'
                        onClick={handleSubmit}
                    >
                        Kirim
                    </Button>
                </div>
            </div>
        </div>
    )
}