import { ColumnDef } from "@tanstack/react-table"
import { IVideo } from "@/models/IVideo"
import AddModal from "./Modals/AddModal"
import RemoveModal from "./Modals/RemoveModal"
import { format } from 'date-fns'

export const VideoColumns: ColumnDef<IVideo>[] = [
    {
        accessorKey: "name",
        header: "Имя",
        cell: ({ row }) => (
            <div className="capitalize">{row.getValue("name")}</div>
        ),
    },
    {
        accessorKey: "playlist",
        header: "Плейлист",
        cell: ({ row }) => (
            <div className="lowercase">{row.original.playlist?.name}</div>
        ),
    },
    {
        accessorKey: "artist",
        header: "Исполнитель",
        cell: ({ row }) => (
            <div className="lowercase">{row.original.artist?.name}</div>
        ),
    },
    {
        accessorKey: "date",
        header: "Date",
        cell: ({ row }) => (
            <div className="lowercase">{format(new Date(row.getValue("date")), 'dd.mm.yyyy')}</div>
        ),
    },
    {
        id: "actions",
        enableHiding: false,
        maxSize: 0,
        cell: ({row}) => {
        return (
            <div className="flex items-center justify-end">
                <AddModal edit video={row.original}/>
                <RemoveModal video_id={row.original._id}/>
            </div>
        )
        },
    },
]