import type { HTMLAttributes } from 'react';
import React, { memo, type ReactNode } from 'react';
import classNames from 'classnames';

export interface DataListItemCellOwnProps {
  /**
   * Content of the cell.
   * @default undefined
   */
  children?: ReactNode;
  /**
   * Allows cell to grow.
   * @default true
   */
  grow?: boolean;
  /**
   * Allows cell to shrink.
   *
   * Use it for small cells, e.g. with icons, buttons or checkboxes.
   *
   * @default true
   */
  shrink?: boolean;
}

export interface DataListItemCellProps
  extends DataListItemCellOwnProps, Omit<HTMLAttributes<HTMLDivElement>, 'className'> {}

export function getDataListCellProps<
  P extends DataListItemCellOwnProps & {
    className?: string;
  },
>({ className, grow = true, shrink = true, ...rest }: P) {
  return {
    ...rest,
    className: classNames(className, 'dataList__itemCell', {
      'dataList__itemCell--grow': grow,
      'dataList__itemCell--shrink': shrink,
    }),
  };
}

export const DataListItemCell = memo(function DataListItemCell(props: DataListItemCellProps) {
  return <div {...getDataListCellProps(props)} />;
});