import { AnchorHTMLAttributes, ButtonHTMLAttributes, FC } from 'react';
import { Icon } from '@mdi/react';

type ButtonProps = {
    text: string;
    icon?: string;
    size?: string | number;
    className?: string;
};

const iconClassNames = 'p-2 rounded-8 hover:bg-neutral';
const textClassNames = 'px-8 py-6 border dark:border-slate-400 hover:shadow rounded-4 text-12 font-bold uppercase';
const commonClassNames = 'text-primary dark:text-primary-dark dark:hover:bg-neutral-dark';

export const Button: FC<ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>> = ({ text, icon, size = 1, className = '', ...rest }) => (
    <button className={`${commonClassNames} ${icon ? iconClassNames : textClassNames} ${className}`} aria-label={text} {...rest}>
        {icon ? <Icon path={icon} size={size ?? 1} /> : text}
    </button>
);

export const LinkButton: FC<ButtonProps & AnchorHTMLAttributes<HTMLAnchorElement>> = ({
    text,
    icon,
    size = 1,
    className = '',
    ...rest
}) => (
    <a
        target="_blank"
        rel="noreferrer"
        className={`${commonClassNames} ${icon ? iconClassNames : textClassNames} ${className}`}
        aria-label={text}
        {...rest}>
        {icon ? <Icon path={icon} size={size} /> : text}
    </a>
);

import { FC } from 'react';
import { Icon } from '@mdi/react';

type ButtonProps = {
    text: string;
    title?: string;
    icon?: string;
    size?: string | number;
    className?: string;
    onClick?: () => void;
    href?: string;
};

export const Button: FC<ButtonProps> = ({ onClick, href, text, title, icon, size, className }) => {
    const conditional = icon
        ? 'p-2 rounded-8 hover:bg-neutral'
        : 'px-8 py-6 border dark:border-slate-400 hover:shadow rounded-4 text-12 font-bold uppercase';
    const classes = `text-primary dark:text-primary-dark dark:hover:bg-neutral-dark ${conditional} ${className ?? ''}`;

    const content = icon ? <Icon path={icon} size={size ?? 1} /> : text;

    return href ? (
        <a href={href} target="_blank" rel="noreferrer" className={classes} title={title} aria-label={text}>
            {content}
        </a>
    ) : (
        <button onClick={onClick} className={classes} title={title} aria-label={text}>
            {content}
        </button>
    );
};

--- 
+++ 
@@ -1,31 +1,36 @@
-import { FC } from 'react';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, FC } from 'react';
 import { Icon } from '@mdi/react';
 
 type ButtonProps = {
     text: string;
-    title?: string;
     icon?: string;
     size?: string | number;
     className?: string;
-    onClick?: () => void;
-    href?: string;
 };
 
-export const Button: FC<ButtonProps> = ({ onClick, href, text, title, icon, size, className }) => {
-    const conditional = icon
-        ? 'p-2 rounded-8 hover:bg-neutral'
-        : 'px-8 py-6 border dark:border-slate-400 hover:shadow rounded-4 text-12 font-bold uppercase';
-    const classes = `text-primary dark:text-primary-dark dark:hover:bg-neutral-dark ${conditional} ${className ?? ''}`;
+const iconClassNames = 'p-2 rounded-8 hover:bg-neutral';
+const textClassNames = 'px-8 py-6 border dark:border-slate-400 hover:shadow rounded-4 text-12 font-bold uppercase';
+const commonClassNames = 'text-primary dark:text-primary-dark dark:hover:bg-neutral-dark';
 
-    const content = icon ? <Icon path={icon} size={size ?? 1} /> : text;
+export const Button: FC<ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>> = ({ text, icon, size = 1, className = '', ...rest }) => (
+    <button className={`${commonClassNames} ${icon ? iconClassNames : textClassNames} ${className}`} aria-label={text} {...rest}>
+        {icon ? <Icon path={icon} size={size ?? 1} /> : text}
+    </button>
+);
 
-    return href ? (
-        <a href={href} target="_blank" rel="noreferrer" className={classes} title={title} aria-label={text}>
-            {content}
-        </a>
-    ) : (
-        <button onClick={onClick} className={classes} title={title} aria-label={text}>
-            {content}
-        </button>
-    );
-};
+export const LinkButton: FC<ButtonProps & AnchorHTMLAttributes<HTMLAnchorElement>> = ({
+    text,
+    icon,
+    size = 1,
+    className = '',
+    ...rest
+}) => (
+    <a
+        target="_blank"
+        rel="noreferrer"
+        className={`${commonClassNames} ${icon ? iconClassNames : textClassNames} ${className}`}
+        aria-label={text}
+        {...rest}>
+        {icon ? <Icon path={icon} size={size} /> : text}
+    </a>
+);
Rewrite and improve common button components
