import { ReactNode, FunctionComponent } from 'react';

type Props = {
  columnNames: string[];
  children?: ReactNode;
};

const Table = ({ columnNames, children }: Props) => (
  <div className="overflow-x-auto">
    <table className="table-fixed min-w-full">
      <thead className="text-left">
        <tr>
          {columnNames.map((cn) => (
            <th className="py-1 px-2">{cn}</th>
          ))}
        </tr>
      </thead>
      {children}
    </table>
  </div>
);

export default Table;