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

let className: string | string[] = [];
if (align !== 'inherit')
	className.push(`text-${align}`);

if (size === 'xxl' || size === 'xl')
	className.push('page-header');

if (attr.class)
	className.push(attr.class);

className = className.join(' ');
---

<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");
		&.page-header {
			font-size: theme("fontSize.header-page");
		}
        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>