'use client'

import { type ColumnDef } from '@tanstack/react-table'

import { Abbr } from '@repo/ui/components/abbr'
import {
  DataTableColumnDatetime,
  DataTableColumnHeaderSort,
  DataTableColumnCpfCnpj
} from '@repo/ui/components/data-table'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { initials } from '@repo/ui/lib/utils'
import type { User } from '@repo/ui/routes/users/data'

export type { User }

export const columns: ColumnDef<User>[] = [
  {
    header: 'Colaborador',
    cell: ({ row }) => {
      const { name, email } = row.original

      return (
        <div className="flex gap-2.5 items-center">
          <Avatar className="size-10 hidden lg:block">
            <AvatarFallback className="border">{initials(name)}</AvatarFallback>
          </Avatar>

          <ul>
            <li className="font-bold">
              <Abbr>{name}</Abbr>
            </li>
            <li className="text-muted-foreground text-sm">
              <Abbr>{email}</Abbr>
            </li>
          </ul>
        </div>
      )
    }
  },
  {
    accessorKey: 'cpf',
    header: 'CPF',
    cell: DataTableColumnCpfCnpj
  },
  {
    accessorKey: 'createDate',
    enableSorting: true,
    meta: { title: 'Cadastrado em' },
    header: DataTableColumnHeaderSort,
    cell: DataTableColumnDatetime
  },
  {
    accessorKey: 'lastLogin',
    enableSorting: true,
    meta: { title: 'Último acesso' },
    header: DataTableColumnHeaderSort,
    cell: DataTableColumnDatetime
  }
]
