import { Skeleton } from '@moex-vibe/design-system'

const tdStyle = {
  borderBottom: '1px solid #eeeeee',
  padding: '10px 8px',
  verticalAlign: 'top',
} satisfies React.CSSProperties

type Column = { width: string }

export function TableSkeleton({ rows = 5, columns }: { rows?: number; columns: Column[] }) {
  return (
    <tbody>
      {Array.from({ length: rows }).map((_, i) => (
        <tr key={i}>
          {columns.map((col, j) => (
            <td key={j} style={tdStyle}>
              <Skeleton height={12} width={col.width} shape="text" />
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  )
}