import React from "react";
import StyledTable from "./StyledTable";
import TableCell from "./TableCell/TableCell";
import TableHeader from "./TableHeader/TableHeader";
import TableHeaderCell from "./TableHeaderCell/TableHeaderCell";
import TableRow from "./TableRow/TableRow";

type classes = {
  table?: string;
  header?: string;
  headerCell?: string;
  row?: string;
  cell?: string;
};

type header = {
  title: string;
  selector: string;
};

type TableProps = {
  classes?: classes;
  header: Array<header>;
  rows: Array<{}>;
  props?: any;
};

const Table: React.FC<TableProps> = ({ classes, header, rows, ...props }) => {
  return (
    <StyledTable className={classes?.table} {...props}>
      <TableHeader className={classes?.header}>
        <TableRow className={classes?.row}>
          {header.map(({ title }) => (
            <TableHeaderCell key={title} className={classes?.headerCell}>
              {title}
            </TableHeaderCell>
          ))}
        </TableRow>
      </TableHeader>
      <tbody>
        {rows.map((row: { [key: string]: any }, index: number) => (
          <TableRow key={index} className={classes?.row}>
            {header.map(({ selector }) => (
              <TableCell className={classes?.cell}>{row[selector]}</TableCell>
            ))}
          </TableRow>
        ))}
      </tbody>
    </StyledTable>
  );
};

export default Table;