import { Box, Card } from "@mantine/core";
import type { ReactNode } from "react";

export interface TableCardProps {
  children: ReactNode;
  /**
   * Optional heading row (title, chips, actions). Rendered in its own padded
   * section above the table and OUTSIDE the scroll region — a header inside it
   * would slide away from its own table on a narrow viewport.
   */
  header?: ReactNode;
  /**
   * Minimum width (px) the table is forced to occupy. The Mantine `Table` is
   * always `width: 100%`, so without a floor it can never overflow its
   * container and the horizontal scroll never engages. Setting a floor lets
   * columns keep a sensible width and the card scroll horizontally on narrow
   * viewports instead of squishing.
   */
  minWidth?: number;
}

/**
 * Flush card shell for a `DataTable`: a padding-less card whose table region
 * runs edge to edge. Padding is applied per section rather than to the card, so
 * the optional {@link TableCardProps.header} is inset like any other card
 * content while the table's own rows and header cells reach both edges.
 *
 * Pair with the table's `containerClassName="border-0 shadow-none bg-transparent"`
 * so every table on the customer pages reads identically (same surface, same
 * scroll behaviour).
 */
export function TableCard({
  children,
  minWidth = 860,
  header,
}: TableCardProps) {
  return (
    <Card p={0}>
      {header && (
        <Box p="md" style={{ borderBottom: "1px solid var(--mantine-color-edr-border-0)" }}>
          {header}
        </Box>
      )}
      <Box style={{ overflowX: "auto" }} w="100%">
        <Box miw={minWidth}>{children}</Box>
      </Box>
    </Card>
  );
}

export default TableCard;