import clsx from 'clsx';

export const Typography = {
    MainTitle: ({
        children,
        className,
        ...props
    }: React.HTMLAttributes<HTMLHeadingElement>) => {
        return (
            <h1
                className={clsx('text-2xl font-semibold mb-1', className)}
                {...props}
            >
                {children}
            </h1>
        );
    },

    Title: ({
        children,
        className,
        ...props
    }: React.HTMLAttributes<HTMLHeadingElement>) => {
        return (
            <h2
                className={clsx('font-medium text-white', className)}
                {...props}
            >
                {children}
            </h2>
        );
    },

    Paragraph: ({
        children,
        className,
        ...props
    }: React.HTMLAttributes<HTMLParagraphElement>) => {
        return (
            <p
                className={clsx(
                    'text-sm text-zinc-400 justify-evenly',
                    className
                )}
                {...props}
            >
                {children}
            </p>
        );
    },
};
