import * as React from 'react';

import s from './SummaryList.module.scss';

interface ISummaryListProps {
  children: React.ReactNode;
  title: string;
  label?: string;
  amount?: string;
  loading?: boolean;
  DatePicker?: React.ReactElement;
}

export const SummaryList = ({
  children,
  title,
  label,
  amount,
  loading,
  DatePicker,
}: ISummaryListProps) => {
  return (
    <div className={s.summaryList}>
      <div className={s.summaryList__inner}>
        <div className={s.summaryList__shadow}>
          <div className={s.summaryList__background}>
            <div className={s.summaryList__header}>
              <div className={s.summaryList__title}>{title}</div>
              <div className={s.summaryList__datePicker}>{DatePicker}</div>
            </div>
            {children}
            {!loading && (
              <div className={s.summaryList__total}>
                <div className={s.summaryList__label}>{label}</div>
                <div className={s.summaryList__amount}>{amount}</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};