import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
import { type DataTableSize } from './DataTableProvider';
import { type DataTableSlotRecipeVariant } from '../../styled-system/recipes';
/**
 * The type of cell data.
 * Used for determining how to render and align cell content.
 *
 * - `text`: Left-aligned text content (default)
 * - `amount`: Right-aligned numeric content (amounts, balances, etc.)
 */
export type CellDataType = 'text' | 'amount';
/**
 * The props for the `DataTable` component.
 *
 * It extends the general attributes of `table` element.
 *
 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
 */
export type DataTableProps = {
    /**
     * The size of the data header cell and data cell.
     * It accepts `small` or `medium`.
     *
     * @default 'medium'
     */
    size?: DataTableSize;
    /**
     * Whether the table rows are selectable.
     * If `true`, the checkbox cell will be added to the first column of header and each row.
     *
     * @default false
     */
    enableRowSelection?: boolean;
    /**
     * Whether the header is fixed when scrolling horizontally.
     * If `true`, the header will be sticky.
     *
     * @default false
     */
    fixedHeader?: boolean;
    /**
     * The layout of the data table.
     * It accepts `default` or `edge-to-edge`.
     *
     * @default 'default'
     */
    layout?: DataTableSlotRecipeVariant['layout'];
    /**
     * The index of the column to fix on the left side.
     * It should be started from 0.
     *
     * If the fixed column width might be changed with any interaction, such as disclosure, removing row or translating,
     * please add `table-layout: fixed` to the DataTable and specify the width of the each column.
     *
     * @default undefined
     */
    leftFixedColumnIndex?: number;
    /**
     * The index of the column to fix on the right side.
     * It should be started from 0.
     *
     * If the fixed column width might be changed with any interaction, such as disclosure, removing row or translating,
     * please add `table-layout: fixed` to the DataTable and specify the width of the each column.
     *
     * @default undefined
     */
    rightFixedColumnIndex?: number;
    /**
     * The props for the wrapper element of the table.
     *
     * The DataTable component is wrapped with a `div` element.
     *
     * ```tsx
     * <div {...wrapperProps}>
     *   <table {...props}>
     *     ...
     *   </table>
     * </div>
     * ```
     *
     * Currently supported props are below.
     *
     * @property className - The class name of the wrapper element.
     */
    wrapperProps?: Pick<ComponentPropsWithoutRef<'div'>, 'className'>;
    /**
     * Whether the table is loading.
     * If `true`, four rows with the skeleton cell will be shown instead of the table content.
     *
     * @default false
     */
    loading?: boolean;
    /**
     * The content to display when the data table has no rows.
     * This can be a string message, icon, illustration, or any React component.
     * The content will be displayed below the table header with proper spacing and centering.
     *
     * @default undefined
     */
    emptyStateSlot?: ReactNode;
} & ComponentPropsWithRef<'table'>;