'use client'

import classNames from 'classnames'
import type { HTMLAttributes, ReactNode } from 'react'

export type TTableSkin = 'basic' | 'zebra-blue'

interface ITableProps extends HTMLAttributes<HTMLTableElement> {
  compact?: boolean
  skin?: 'basic' | 'zebra-blue'
  responsiveView?: boolean
  className?: string
  children: ReactNode
}

export const PktTable = ({
  className,
  compact = false,
  skin = 'basic',
  responsiveView = true,
  children,
  ...props
}: ITableProps) => {
  return (
    <table
      data-testid="pkt-table"
      className={classNames(className, 'pkt-table', {
        'pkt-table--responsive': responsiveView,
        'pkt-table--compact': compact,
        'pkt-table--basic': skin === 'basic',
        'pkt-table--zebra-blue': skin === 'zebra-blue',
      })}
      role="table"
      {...props}
    >
      {children}
    </table>
  )
}