import { stylesheet } from "typestyle";
import {
	type Component,
	// biome-ignore lint/correctness/noUnusedImports: required to support JSX
	createElement,
} from "websnacks";

const styles = stylesheet({
	header: {
		background: "#6c42bd",
		color: "#fff",
		padding: "32px",
		textAlign: "center",
		boxShadow: "0 1px 8px -3px #000",
	},
	headline: {
		fontSize: "28px",
	},
});

export interface HeaderProps {
	headline: string;
}

export const Header: Component<HeaderProps> = ({ headline }) => (
	<header className={styles.header}>
		<h1 className={styles.headline}>{headline}</h1>
	</header>
);