'use client'
import { DataTableLayout } from "ikoncomponents";
import { ColumnDef } from "ikoncomponents";
import { Button } from "ikoncomponents";
import { SquarePenIcon } from "lucide-react";

interface ExpenseData {
    expenseName: string;
    location: string;
    currency: string;
    cost: number;
    quantity: number;
    description: string;
    totalCost?: number;
    [key: string]: any;
}

export default function ExpenseDataTable({ expenseDetails, onEdit }: { expenseDetails: ExpenseData[]; onEdit: (id: string) => void; }) {

    const columnsProuductDetails: ColumnDef<ExpenseData>[] = [
        {
            accessorKey: "expenseName",
            header: () => (
                <div style={{ textAlign: 'center' }}>Expense Name</div>
            ),
        },
        {
            accessorKey: "location", 
            header: () => (
                <div style={{ textAlign: 'center' }}>Location</div>
            ),
        },
        {
            accessorKey: "currency", 
            header: () => (
                <div style={{ textAlign: 'center' }}>Currency</div>
            ),
        },
        {
            accessorKey: "cost", 
            header: () => (
                <div style={{ textAlign: 'center' }}>Cost</div>
            ),
        },
        {
            accessorKey: "quantity", 
            header: () => (
                <div style={{ textAlign: 'center' }}>Quantity</div>
            ),
        },
        {
            accessorKey: "totalCost", 
            header: () => (
                <div style={{ textAlign: 'center' }}>Total Cost</div>
            ),
        },
        {
            header: () => (
                <div style={{ textAlign: 'center' }}>Actions</div>
            ),
            cell: (row) => (
                <Button onClick={() => onEdit(row.uuid)}>
                    <SquarePenIcon />
                </Button>
            ),
        },
    ];

    return (
        <DataTableLayout
            columns={columnsProuductDetails}
            data={expenseDetails}
            extraTools={{
                keyExtractor: (row: ExpenseData) => row.uuid ?? row.expenseName,
                totalPages: 0,
                currentPage: 0,
            }}
        />
    );
}