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

export const ArtistColumns: ColumnDef<IArtist>[] = [
    {
        accessorKey: "name",
        header: "Имя",
        cell: ({ row }) => (
            <div className="capitalize">{row.getValue("name")}</div>
        ),
    },
    {
        accessorKey: "soundcloud",
        header: "Soundcloud",
        cell: ({ row }) => (
            <div className="lowercase">{row.getValue("soundcloud")}</div>
        ),
    },
    {
        accessorKey: "facebook",
        header: "Facebook",
        cell: ({ row }) => (
            <div className="lowercase">{row.getValue("facebook")}</div>
        ),
    },
    {
        accessorKey: "spotify",
        header: "Spotify",
        cell: ({ row }) => (
            <div className="lowercase">{row.getValue("spotify")}</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 artist={row.original}/>
                <RemoveModal artist_id={row.original._id}/>
            </div>
        )
        },
    },
]