import React from "react";
import figlet from "figlet";
import { Box, Text } from "ink";
import { useColor, useUnchained } from "./theme.ts";

export const Header = React.memo(() => {
	const font: figlet.Fonts = "Doom";
	const top = figlet.textSync("Laiss", { font });
	const bottom = figlet.textSync("Codex", { font });
  const themeColor = useColor();
  const unchained = useUnchained();

	return <Box flexDirection="column">
		<Text color={themeColor}>{top}</Text>
		<Text>{bottom}</Text>
    { unchained && <Text>Unchained mode activated!</Text> }
	</Box>
});