'use client';
import IconTrashLines from '@/components/icon/icon-trash-lines';
import PanelCodeHighlight from '@/components/panel-code-highlight';
import Tippy from '@tippyjs/react';
import 'tippy.js/dist/tippy.css';
import React from 'react';
import IconEye from '../icon/icon-eye';
import { formatUnixTimestamp } from "@/utils/helpers"

const ComponentsTablesSimple = ({ tableData = [] }: { tableData: any[] }) => {

    return (
        <PanelCodeHighlight title="Chint Sites">
            <div className="table-responsive mb-5">
                <table>
                    <thead>
                        <tr>
                            <th>Site Name</th>
                            <th>Inverters</th>
                            <th>Status</th>
                            <th>Created At</th>
                            <th>Updated At</th>
                            <th className="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {tableData.map((data) => (
                            <tr key={data.id}>
                                <td>
                                    <div className="whitespace-nowrap">{data.name}</div>
                                </td>
                                <td>{data.deviceQty.inverterQty}</td>
                                <td>
                                    <div className={`whitespace-nowrap ${ data.status !== 1 ? "text-danger" : "text-success" }`} >
                                        {data.statusLabel}
                                    </div>
                                </td>
                                <td>{formatUnixTimestamp(data.createdAt)}</td>
                                <td>{formatUnixTimestamp(data.updatedAt)}</td>
                                <td className="text-center">
                                    <Tippy content="Delete">
                                        <button type="button">
                                            <IconTrashLines className="m-auto" />
                                        </button>
                                    </Tippy>
                                </td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </PanelCodeHighlight>
    );
};


export default ComponentsTablesSimple;