import type { ReactNode } from "react";

import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

import { getPrintValue } from "./meeting-print-helpers";

type MeetingPrintInfoItemProps = {
  label: string;
  value?: string;
  icon?: ReactNode;
  children?: ReactNode;
};

export function MeetingPrintInfoItem({
  label,
  value,
  icon,
  children,
}: MeetingPrintInfoItemProps) {
  return (
    <Box className="meeting-print-info-item">
      <Box className="meeting-print-info-label-wrap">
        {icon ? <Box className="meeting-print-info-icon">{icon}</Box> : null}
        <Typography className="meeting-print-info-label">
          {label} :
        </Typography>
      </Box>
      <Box className="meeting-print-info-value">
        {children ?? getPrintValue(value)}
      </Box>
    </Box>
  );
}