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

export interface TableCardProps {
  children: 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 borderless, padding-less card whose
 * single child is a horizontally scrollable region. 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 }: TableCardProps) {
  return (
    <Card p={0}>
      <Box style={{ overflowX: "auto" }} w="100%">
        <Box miw={minWidth}>{children}</Box>
      </Box>
    </Card>
  );
}

export default TableCard;