import {
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
} from '@mui/material';

interface GuideTableProps {
  headers: string[];
  rows: string[][];
}

export const GuideTable = ({ headers, rows }: GuideTableProps) => {
  return (
    <TableContainer
      component={Paper}
      sx={{
        my: 3,
        backgroundColor: 'rgba(255,255,255,0.03)',
        border: '1px solid rgba(255,255,255,0.08)',
        borderRadius: 2,
      }}
    >
      <Table size="small">
        <TableHead>
          <TableRow>
            {headers.map((header, idx) => (
              <TableCell
                key={idx}
                sx={{
                  fontWeight: 600,
                  color: 'rgba(168,184,192,0.9)',
                  borderBottom: '1px solid rgba(255,255,255,0.08)',
                  fontSize: '0.85rem',
                  whiteSpace: 'nowrap',
                }}
              >
                {header}
              </TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row, rowIdx) => (
            <TableRow key={rowIdx}>
              {row.map((cell, cellIdx) => (
                <TableCell
                  key={cellIdx}
                  sx={{
                    color: 'rgba(168,184,192,0.75)',
                    borderBottom: '1px solid rgba(255,255,255,0.04)',
                    fontSize: '0.85rem',
                    verticalAlign: 'top',
                  }}
                >
                  {cell}
                </TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
};
