'use client'

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

import { Abbr } from '@repo/ui/components/abbr'
import { Avatar, AvatarFallback } from '@repo/ui/components/ui/avatar'
import { initials } from '@repo/ui/lib/utils'

// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type Org = {
  id: string
  name: string
  email: string
  cnpj?: string
}

const formatted = new Intl.DateTimeFormat('pt-BR', {
  day: '2-digit',
  month: '2-digit',
  year: 'numeric',
  hour: '2-digit',
  minute: '2-digit'
})

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

      return (
        <div className="flex gap-2.5 items-center">
          <Avatar className="size-10 hidden lg:block">
            <AvatarFallback>{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>
      )
    }
  },
  {
    header: 'CNPJ',
    cell: ({ row }) => {
      const { cnpj } = row.original
      return <>{formatCNPJ(cnpj)}</>
    }
  },
  {
    header: 'Cadastrado em',
    meta: {
      className: 'w-1/12'
    },
    cell: ({ row }) => {
      const { createDate } = row.original

      if (!createDate) {
        return <></>
      }

      return formatted.format(new Date(createDate))
    }
  }
]