---
import type { HTMLAttributes } from "astro/types"

const sizes = {
	"xxl": "h1",
    "xl": "h2",
    "lg": "h2",
    "md": "h3",
    "sm": "h4",
    "xs": "h5",
    "xxs": "h6"
};

type Headers = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";

interface Props extends HTMLAttributes<Headers> {
    size?: keyof typeof sizes;
	align?: "left" | "center" | "right" | "inherit";
}

const {
	size = "lg",
	align = "inherit",
	...attr
} = Astro.props;
const Element = sizes[size] as any; // Unfortunately gotta do this

const className = (align == "inherit" ? "" : `text-${align} `)
	+ (size == "xxl" ? " page-header" : "")
	+ (attr.class ? ` ${attr.class}` : "");
---

<Element {...attr} class={className}>
    <slot />
</Element>

<style>
    h1 {
		font-size: theme("fontSize.header-lg");
		&.page-header {
			font-size: theme("fontSize.header-page");
		}
        font-weight: 600;
    }

    h2 {
        font-size: theme("fontSize.header");
        font-weight: 600;
    }

    h3 {
        font-size: theme("fontSize.header-sm");
        font-weight: 600;
    }

    h4 {
        font-size: theme("fontSize.body-lg");
        font-weight: 500;
    }

    h5 {
        font-size: theme("fontSize.body");
        font-weight: 500;
    }

    h6 {
        font-size: theme("fontSize.body-sm");
        font-weight: 500;
    }

	h1, h2, h3, h4, h5, h6 {
		& :global(b) {
			@apply text-blue-500;
			font-weight: inherit;
		}
	}
</style>