import { SkeletonBlock } from '@/shared/ui/SkeletonBlock';

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}>
              <SkeletonBlock height={12} width={col.width} />
            </td>
          ))}
        </tr>
      ))}
    </tbody>
  );
}