import React from "react";
import { AriaProps } from "../types/aria";
import { usePalette } from "../hooks/useTheme";
import { hexFromArgb } from "@material/material-color-utilities";

type LinkProps = AriaProps & {
	href?: string;
	target?: '_blank' | '_self' | '_parent' | '_top';
	rel?: string;
	children?: React.ReactNode;
	className?: string;
	id?: string;
	style?: React.CSSProperties;

	color?: string;
};

export const Link = (props: LinkProps) => {
	const palette = usePalette();
	const { style, color = hexFromArgb(palette.primary), ...rest } = props;

	return (
		<a
			style={{
				color,
				textDecorationColor: color,
				textDecoration: 'underline',
				...style,
			}}
			{...rest}
		/>
	);
};