import React from 'react'

import type { TableComponentProps } from '../types'

// Простые компоненты таблицы
export const Table = React.memo(function Table({ 
  children, 
  ...props 
}: TableComponentProps) {
  return (
    <div className="w-full" {...props}>
      <table className="w-full">{children}</table>
    </div>
  )
})

export const TableHeader = React.memo(function TableHeader({ 
  children, 
  ...props 
}: TableComponentProps) {
  return <thead {...props}>{children}</thead>
})

export const TableBody = React.memo(function TableBody({ 
  children, 
  ...props 
}: TableComponentProps) {
  return <tbody {...props}>{children}</tbody>
})

export const TableRow = React.memo(function TableRow({
  children,
  className = '',
  ...props
}: TableComponentProps) {
  return (
    <tr className={className} {...props}>
      {children}
    </tr>
  )
})

export const TableHead = React.memo(function TableHead({
  children,
  className = '',
  ...props
}: TableComponentProps) {
  return (
    <th className={`px-4 py-3 text-left ${className}`} {...props}>
      {children}
    </th>
  )
})

export const TableCell = React.memo(function TableCell({
  children,
  className = '',
  ...props
}: TableComponentProps) {
  return (
    <td className={`px-4 py-3 ${className}`} {...props}>
      {children}
    </td>
  )
})