frontend/src/features/instrument-details/ui/InstrumentHeader/InstrumentHeader.view.tsx

import type { FC, PropsWithChildren, ReactNode } from "react";

import { Avatar, Group, Paper, Text, Title } from "@mantine/core";

import classes from "./InstrumentHeader.module.css";

type InstrumentHeaderProps = PropsWithChildren<{
	logoSrc: null | string;
	name: string;
	subtitle: ReactNode;
}>;

const InstrumentHeader: FC<InstrumentHeaderProps> = (props) => {
	const { children, logoSrc, name, subtitle } = props;

	return (
		<Paper className={classes.header} component="header" withBorder>
			<Group align="start" justify="space-between">
				<div className={classes.identity}>
					<Avatar alt="" key={logoSrc} radius="md" size={56} src={logoSrc}>
						{name[0]}
					</Avatar>

					<div>
						<Title order={1} size="h2">{name}</Title>

						<Text c="dimmed" size="sm">{subtitle}</Text>
					</div>
				</div>
			</Group>

			{children}
		</Paper>
	);
};

export { InstrumentHeader };