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

export interface ButtonProps {
	size?: 'small' | 'medium' | 'large'
	color?:
		| 'primary'
		| 'secondary'
		| 'secondary-high-contrast'
		| 'tertiary'
		| 'critical'
		| 'boundary'
		| 'consul'
		| 'nomad'
		| 'packer'
		| 'terraform'
		| 'vagrant'
		| 'vault'
		| 'waypoint'
		| 'hashicorp' // alias to primary
	isFullWidth?: boolean
	isIconOnly?: boolean
	icon?: ReactNode
	iconPosition?: 'leading' | 'trailing'
	text?: string
	href?: string
	isHrefExternal?: boolean
	onClick?: () => void
	className?: string
}

export default function Button({
	size = 'medium',
	color = 'primary',
	isFullWidth,
	isIconOnly,
	icon,
	iconPosition = 'leading',
	text,
	href,
	isHrefExternal,
	onClick,
	className,
	...rest
}: ButtonProps) {
	return (
		<Interactive
			className={classNames(
				'hds-button',
				`hds-button--size-${size}`,
				`hds-button--color-${color === 'hashicorp' ? 'primary' : color}`,
				{ ['hds-button--width-full']: isFullWidth },
				className
			)}
			href={href}
			isHrefExternal={isHrefExternal}
			onClick={onClick}
			aria-label={isIconOnly ? text : undefined}
			{...rest}
		>
			{isIconOnly ? (
				<div className="hds-button__icon">{icon}</div>
			) : icon ? (
				iconPosition === 'leading' ? (
					<>
						<div className="hds-button__icon">{icon}</div>
						<div className="hds-button__text">{text}</div>
					</>
				) : (
					<>
						<div className="hds-button__text">{text}</div>
						<div className="hds-button__icon">{icon}</div>
					</>
				)
			) : (
				<div className="hds-button__text">{text}</div>
			)}
		</Interactive>
	)
}