import React from 'react';
import { Box } from './Box';

interface LeaderboardTableShellProps {
  columns: {
    key: string;
    label: string;
    align?: 'left' | 'center' | 'right';
    width?: string;
  }[];
  children: React.ReactNode;
  className?: string;
}

export function LeaderboardTableShell({ columns, children, className = '' }: LeaderboardTableShellProps) {
  return (
    <Box 
      rounded="xl" 
      bg="bg-iron-gray/30" 
      border 
      borderColor="border-charcoal-outline" 
      overflow="hidden"
      className={className}
    >
      <div className="overflow-x-auto">
        <table className="w-full text-left border-collapse">
          <thead>
            <tr className="border-b border-charcoal-outline/50 bg-graphite-black/50">
              {columns.map((col) => (
                <th 
                  key={col.key}
                  className={`px-4 py-3 text-[10px] uppercase tracking-widest font-bold text-gray-500 ${
                    col.align === 'center' ? 'text-center' : col.align === 'right' ? 'text-right' : 'text-left'
                  }`}
                  style={col.width ? { width: col.width } : {}}
                >
                  {col.label}
                </th>
              ))}
            </tr>
          </thead>
          <tbody className="divide-y divide-charcoal-outline/30">
            {children}
          </tbody>
        </table>
      </div>
    </Box>
  );
}