import type { ElementType, ReactNode } from 'react';

type LabelVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'body' | 'body2' | 'caption' | 'error' | 'code';

type LabelProps<T extends ElementType> = {
    variant?: LabelVariant;
    as?: T;
    className?: string;
    children: ReactNode;
};

const variantClassMap: Record<LabelVariant, string> = {
    h1: 'ui-title text-3xl font-bold',
    h2: 'ui-title text-2xl font-semibold',
    h3: 'ui-title text-xl font-semibold',
    h4: 'ui-title text-base font-semibold',
    body: 'ui-body-primary text-sm',
    body2: 'ui-body-secondary text-sm',
    caption: 'ui-kicker text-xs font-semibold uppercase tracking-[0.12em]',
    error: 'ui-error text-sm',
    code: 'ui-code text-sm font-mono',
};

const variantTagMap: Record<LabelVariant, ElementType> = {
    h1: 'h1',
    h2: 'h2',
    h3: 'h3',
    h4: 'h3',
    body: 'p',
    body2: 'p',
    caption: 'p',
    error: 'p',
    code: 'code',
};

export function Label<T extends ElementType = 'p'>({
    variant = 'body',
    as,
    className = '',
    children,
}: Readonly<LabelProps<T>>) {
    const Component = as ?? variantTagMap[variant];
    const classes = `${variantClassMap[variant]} ${className}`.trim();

    return <Component className={classes}>{children}</Component>;
}