Untitled

'use client'
import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/libs/utils'

const TableWrapper = (props: React.HTMLAttributes<HTMLTableElement>) => {
  return <table className="border border-input bg-background shadow-sm rounded-md">{props.children}</table>
}

export type TTableFieldType = 'image' | undefined
type data = { data?: any; rowType?: TTableFieldType }
export type TTableCell = React.HTMLAttributes<HTMLTableCellElement> & data
export type TTableHeaderFooter = TTableCell[]
export type TTableRow = React.HTMLAttributes<HTMLTableRowElement> & TTableCell[]
export type TTableBody = TTableRow[]

const convertToRowData = (data?: any, rowType?: TTableFieldType) => {
  if (rowType === 'image') {
    return <img src={data} alt={''} width={80} height={80} />
  }
  return data === undefined || data === null ? '' : typeof data === 'string' ? data : data.toString()
}

const TableHeader = (props: { headers?: TTableHeaderFooter }) => {
  const { headers } = props
  return (
    <thead>
      <tr>
        {headers?.map((cell, id) => (
          <th
            key={`table-head-cell-${id}`}
            // {...cell}
            className={cn('border border-input bg-background shadow-sm text-center p-5', cell.className)}>
            {convertToRowData(cell.data, cell.rowType)}
            {cell.children}
          </th>
        ))}
      </tr>
    </thead>
  )
}

const TableBody = (props: { body?: TTableBody }) => {
  const { body: rows } = props
  const defaultClassName = 'border text-center p-5'
  return (
    <tbody className="">
      {rows?.map((row, id) => (
        <tr key={`table-body-row-${id}`} className={cn(defaultClassName, row.className)}>
          {row?.map((cell, id) => (
            <td
              key={`table-body-row-cell-${id}`}
              // {...cell}
              className={cn(defaultClassName, cell.className)}>
              {convertToRowData(cell.data, cell.rowType)}
              {cell.children}
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  )
}

const TableFooter = (props: { footer?: TTableHeaderFooter }) => {
  const { footer } = props
  return (
    <tfoot>
      <tr>
        {footer?.map((cell, id) => (
          <td
            key={`table-head-cell-${id}`}
            // {...cell}
            className={cn('border border-input bg-background shadow-sm text-center p-5', cell.className)}>
            {convertToRowData(cell.data, cell.rowType)}
            {cell.children}
          </td>
        ))}
      </tr>
    </tfoot>
  )
}

const tableVariants = cva('inline-flex items-center justify-center rounded-md text-sm font-medium', {
  variants: {
    variant: {
      default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
      destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
      outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
      secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
      ghost: 'hover:bg-accent hover:text-accent-foreground',
      link: 'text-primary underline-offset-4 hover:underline',
    },
    size: {
      default: 'h-9 px-4 py-2',
      sm: 'h-8 rounded-md px-3 text-xs',
      lg: 'h-10 rounded-md px-8',
      icon: 'h-9 w-9',
    },
  },
  defaultVariants: {
    variant: 'default',
    size: 'default',
  },
})

export type TTableData = {
  headers?: TTableHeaderFooter
  body?: TTableBody
  footer?: TTableHeaderFooter
}

export interface TableProps extends React.TableHTMLAttributes<HTMLTableElement>, VariantProps<typeof tableVariants> {
  asChild?: boolean
  tableData?: TTableData
}

const Table = React.forwardRef<HTMLTableElement, TableProps>(
  ({ tableData, className, variant, size, asChild = false, ...props }, ref) => {
    const { headers, body, footer } = tableData || {}
    return (
      <TableWrapper>
        <TableHeader headers={headers} />
        <TableBody body={body} />
        <TableFooter footer={footer} />
        {/* <div className={cn(tableVariants({ variant, size, className }))} ref={ref} {...props} > */}
      </TableWrapper>
    )
  }
)
Table.displayName = 'Table'

export { Table, tableVariants }