import { AnchorHTMLAttributes, ButtonHTMLAttributes, DetailedHTMLProps, RefAttributes } from "react";
import Link, { LinkProps } from 'next/link';

export default function Button({ className, ...props }: DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>) {
    return <button className={'bg-slate-600 text-slate-50 p-1 rounded shadow shadow-slate-900 hover:bg-slate-500 transition-colors ' + (className || '')} {...props} />
}

type LinkButtonProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps> & LinkProps & {
    children?: React.ReactNode;
} & RefAttributes<HTMLAnchorElement>;

export function LinkButton({ className, children, ...props }: LinkButtonProps) {
    return <Link {...props}>
        <a className={'text-blue-200 hover:underline ' + (className || '')}>{children}</a>
    </Link>
}