import { Table } from 'antd';
import axios from 'axios';
import React, { useEffect, useState } from 'react'

export const ContactUsleads = () => {
    const [contactLeads, setContactLeads] = useState([]);
    useEffect(() => {
        axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/contact-uses`).then((res) => {
            let contactLeadsData =
                res.data &&
                res.data.data.map((data) => {
                    return {
                        key: data.id,
                        name: data?.attributes?.name,
                        email: data?.attributes?.email,
                        number: data?.attributes?.number,
                        zip: data?.attributes?.zip,
                        message: data?.attributes?.message,
                        publishedAt: data?.attributes?.publishedAt,
                    }
                })
            console.log("contactLeadsData :", contactLeadsData);
            setContactLeads(contactLeadsData)
        }).catch((err) => {
            console.log(err)
        })
    }, [])
    const transformDateTime = (rawDate) => {
        const date = new Date(rawDate);
    
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are zero-indexed
        const day = String(date.getDate()).padStart(2, "0");
    
        const hours = String(date.getHours()).padStart(2, "0");
        const minutes = String(date.getMinutes()).padStart(2, "0");
        const seconds = String(date.getSeconds()).padStart(2, "0");
    
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    };
    const columns = [
        {
            title: "Name",
            dataIndex: "name",
            key: "name",
            width :300,
            render: text => <a>{text}</a>
        },
        {
            title: "Email",
            dataIndex: "email",
            key: "email",
            width:300,
            render: text => <a>{text}</a>
        },
        {
            title: "Zip",
            dataIndex: "zip",
            key: "zip",
            width:  100,
            render: text => <a>{text}</a>
        },
        {
            title: "Message",
            dataIndex: "message",
            key: "message",
            render: text => <a>{text}</a>
        },
        {
            title: "Date & Time",
            dataIndex: "publishedAt",
            key: "publishedAt",
            width : 200,
            render: text => <a>{transformDateTime(text)}</a>
        },
    ]
    return (
        <div className="p-5 h-100">
            <Table columns={columns} dataSource={contactLeads} />
        </div>
    )
}