import Link from 'next/link';
import React from 'react';

type TypographyProps = {
    as: keyof JSX.IntrinsicElements;
    className?: string;
    children: React.ReactNode;
    link?: string
    onClick?: () => void

};
export type SubTypographyProps = {
    className?: string;
    children?: React.ReactNode;
    link?: string
    as?: keyof JSX.IntrinsicElements;
    onClick?: () => void
};
const Typography: React.FC<TypographyProps> = ({ as: Component, className = '', link, children,onClick, ...props }) => {
    const content = (
        <Component className={`${className}`} {...props} onClick={onClick}>
            {children}
        </Component>
    );

    return link ? (
        <Link href={link} aria-label={link}>
            {content}
        </Link>
    ) : (
        content
    );
};

export default Typography;