import React from 'react';
import classNames from 'classnames';

import type { DataListItemOwnProps } from './DataListItem';
import { DataListSectionHeader } from './DataListSectionHeader';

/** @inheritdoc */
export interface DataListSectionOwnProps extends Omit<DataListItemOwnProps, 'divider'> {}

/** @inheritdoc */
export interface DataListSectionProps
  extends DataListSectionOwnProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {}

export function getDataListSectionProps<
  P extends DataListSectionOwnProps & {
    className?: string;
  },
>({ className, ...rest }: P) {
  return {
    className: classNames(className, 'dataList__section'),
    ...rest,
  };
}

export const DataListSection = Object.assign(
  function DataListSection(props: DataListSectionProps) {
    return <section {...getDataListSectionProps(props)} />;
  },
  {
    displayName: 'DataList.Section',
    Header: DataListSectionHeader,
  }
);