import { BlankLine, Highlight } from "./utils";

type HeaderProps = {
	user: string;
	hostname: string;
};

const Header = ({ user, hostname }: HeaderProps) => (
	<>
		<p>
			<Highlight>{user}</Highlight>@<Highlight>{hostname}</Highlight>
		</p>
		<p>{"-".repeat(user.length + 1 + hostname.length)}</p>
	</>
);

type InfoLineProps = {
	label: string;
	value: string;
};

const InfoLine = ({ label, value }: InfoLineProps) => (
	<p>
		<span className="text-highlight">{label}</span>: {value}
	</p>
);

const Description = () => (
	<div className="invisible-div">
		<Header user="website" hostname="MichaelBradley" />
		<InfoLine label="Location" value="Toronto 🇨🇦" />
		<InfoLine label="Hobbies" value="🖖 🎮 🧗 🏃 🧑‍💻" />
		<BlankLine />
		<InfoLine label="Degree" value="B.C.S. Honours" />
		<InfoLine label="Alma Mater" value="Carleton U" />
	</div>
);

export default Description;