---
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>