import { newLine } from ".";

interface CategoriesProps {
	width: number;
	height: 3;
	selectedTab: "About" | "Projects" | "Contact";
}

const Categories = ({ width, height, selectedTab }: CategoriesProps) => {
	const categories = ["🇦 about", "🇵 projects", "🇨 contact", "🇶 quit"];
	const separatorSpaces = " ".repeat(width / 2 - categories.join(" | ").length / 2 - 4);
	const separatorLine = "─".repeat(width - separatorSpaces.length * 2 - 6 - (width % 2 ? 0 : 1));
	return (
		`${separatorSpaces}┃ ${categories
			.map((value) => (value.includes(selectedTab.toLowerCase()) ? `\x1b[7m${value}\x1b[0m` : value))
			.join(" | ")} ┃${separatorSpaces}${newLine}` + `${separatorSpaces}┗${separatorLine}┛${separatorSpaces}`
	);
};

export default Categories;