"use client";

import React from "react";
import { Row } from "./Row";
import TableContext from "./TableContext";
import type { TableRow } from "./types";

const Rows: React.FC = () => {
  const { rows } = React.useContext(TableContext);
  return (
    <tbody>
      {rows.map((row, i) => (
        <React.Fragment key={i.toString()}>
          <tr>
            <Row row={row} />
          </tr>
          {row?.expand?.map(({ id, ...expandableRow }, j) => (
            <tr
              key={j.toString()}
              id={id}
              className="table__subrow"
              hidden={row.isExpanded ? undefined : true}
            >
              <Row row={expandableRow as TableRow} />
            </tr>
          ))}
        </React.Fragment>
      ))}
    </tbody>
  );
};

Rows.displayName = "TableRows";

export { Rows };