import { Head } from '@inertiajs/react';
import { Card, CardContent } from '@/components/ui/card';
import { DataTable } from '@/components/data-table';
import { useState } from 'react';
import { getColumns, Activity } from './partials/columns';

interface Props {
    activities: Activity[];
}

export default function ActivityLogIndex({ activities }: Props) {
    const columns = getColumns();

    return (
        <div className="flex flex-col gap-6 p-6">
            <Head title="Riwayat Aktivitas" />

            <div className="flex items-center justify-between">
                <div>
                    <h1 className="text-3xl font-bold tracking-tight">Riwayat Aktivitas</h1>
                </div>
            </div>

            <Card className="overflow-hidden border-none shadow-lg bg-card/50 backdrop-blur-sm p-5">
                <CardContent className="p-0">
                    <DataTable
                        columns={columns}
                        data={activities}
                        filters={[
                            {
                                columnId: 'description',
                                title: 'Aksi',
                                options: [
                                    { label: 'Tambah', value: 'TAMBAH' },
                                    { label: 'Ubah', value: 'UBAH' },
                                    { label: 'Hapus', value: 'HAPUS' },
                                ]
                            }
                        ]}
                    />
                </CardContent>
            </Card>
        </div>
    );
}

ActivityLogIndex.layout = {
    breadcrumbs: [
        { title: 'Sistem' },
    ],
};
