import React, { ReactNode } from 'react';
import PropTypes from 'prop-types';
import classNames from 'clsx';

import { Stack, Typography } from '@/mui/components';

import styles from './List.module.scss';

type Props = {
  title: string;
  renderFilters: ReactNode;
  renderActions: ReactNode;
  children: ReactNode;
  classes?: {
    root: string;
    title: string;
    controls: string;
    content: string;
  };
};

function CommonList({ title, renderFilters, renderActions, children, classes }: Props) {
  const classNames$ = {
    root: classes?.root ?? '',
    title: classes?.title ?? '',
    controls: classes?.controls ?? '',
    content: classes?.content ?? '',
  };

  return (
    <Stack fullWidth direction="column" justifyContent="start" className={classNames(classNames$.root, styles.Root)}>
      <Stack direction="row" alignItems="center" fullWidth className={classNames(classNames$.title, styles.Title)}>
        <Typography variant="h6" color="text.primary" fontWeight={400}>
          {title}
        </Typography>
      </Stack>
      {(renderFilters || renderActions) && (
        <Stack
          direction="row"
          alignItems="center"
          justifyContent="space-between"
          flexWrap="nowrap"
          className={classNames(classNames$.controls, styles.Controls)}
        >
          {renderFilters}
          {renderActions}
        </Stack>
      )}
      <Stack fullWidth className={classNames(classNames$.content, styles.Content)}>
        {children}
      </Stack>
    </Stack>
  );
}

CommonList.propTypes = {
  title: PropTypes.string.isRequired,
  renderFilters: PropTypes.node.isRequired,
  renderActions: PropTypes.node.isRequired,
  children: PropTypes.node.isRequired,
};

export default CommonList;
