import type { ReactNode } from 'react'
import Link from 'next/link'

interface InteractiveProps {
	className?: string
	isHrefExternal?: boolean
	href?: string
	onClick?: () => void
	children: ReactNode
}

export default function Interactive(props: InteractiveProps) {
	const { href, className, isHrefExternal, onClick, children, ...rest } = props
	// TODO: trigger link on space key up
	if (href) {
		return (
			<Link
				className={className}
				target={isHrefExternal ? '_blank' : undefined}
				rel={isHrefExternal ? 'noopener noreferrer' : undefined}
				onClick={onClick}
				href={href}
				{...rest}
			>
				{children}
			</Link>
		)
	} else {
		return (
			<button type="button" className={className} onClick={onClick} {...rest}>
				{children}
			</button>
		)
	}
}