import classNames from 'classnames'
import Interactive from '../interactive'
import { type ReactNode } from 'react'
import './style.scss'

interface StandaloneLinkProps {
	text: string
	size?: 'small' | 'medium' | 'large'
	color?: 'primary' | 'secondary' | 'secondary-inverted'
	icon: ReactNode
	iconPosition?: 'leading' | 'trailing'
	href?: string
	isHrefExternal?: boolean
	onClick?: () => void
	className?: string
}

export default function StandaloneLink({
	text,
	size = 'medium',
	color = 'primary',
	icon,
	iconPosition = 'leading',
	className,
	...props
}: StandaloneLinkProps) {
	return (
		<Interactive
			className={classNames(
				'hds-link-standalone',
				`hds-link-standalone--size-${size}`,
				`hds-link-standalone--color-${color}`,
				`hds-link-standalone--icon-position-${iconPosition}`,
				className
			)}
			{...props}
		>
			{iconPosition === 'leading' ? (
				<>
					<div className="hds-link-standalone__icon">{icon}</div>
					<div className="hds-link-standalone__text">{text}</div>
				</>
			) : (
				<>
					<div className="hds-link-standalone__text">{text}</div>
					<div className="hds-link-standalone__icon">{icon}</div>
				</>
			)}
		</Interactive>
	)
}