import { type ReactNode } from 'react';

import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

type InformationRowProps = {
  title: string;
  description: string | ReactNode;
  footer?: ReactNode;
};

export const InformationRow = ({
  title,
  description,
  footer,
}: InformationRowProps) => (
  <>
    <Stack sx={{ gap: 2 }}>
      <Stack sx={{ flexDirection: 'row', justifyContent: 'space-between' }}>
        <Typography
          variant="globalS"
          fontWeight="fontWeightSemiBold"
        >
          {title}
        </Typography>
        {typeof description === 'string' ? (
          <Typography sx={{ maxWidth: '70%', textAlign: 'right' }}>
            {description}
          </Typography>
        ) : (
          description
        )}
      </Stack>
      {footer}
    </Stack>
    <Divider sx={{ my: 2 }} />
  </>
);