import { Stack, Typography } from "@mui/material";
import type { FC } from 'react';

interface KeyValueProps {
	title: string;
	value: string;
}

export const KeyValue: FC<KeyValueProps> = ({ title, value }) => {
	return (
		<Stack direction="row"
			alignItems="baseline"
			spacing={1}>
			<Typography
				component="span"
				variant="caption"
				noWrap
			>
				{title}:
			</Typography>
			<Typography
				component="span"
				variant="body2"
				noWrap
				fontWeight="bold"
			>
				{value}
			</Typography>
		</Stack>
	);
};