import { LinkExternalIcon } from '@primer/octicons-react';
import { cn } from '~/utils/cn';

interface Props {
	to: string;
	name: string;
	children: string;
	className?: string;
}

export default function Link({ to, name: alt, children, className }: Props) {
	return (
		<a
			href={to}
			aria-label={alt}
			target="_blank"
			rel="noreferrer"
			className={cn(
				'inline-flex items-center gap-x-1',
				'text-blue-500 hover:text-blue-700',
				'dark:text-blue-400 dark:hover:text-blue-300',
				className,
			)}
		>
			{children}
			<LinkExternalIcon className="h-3 w-3" />
		</a>
	);
}