import type { IActionCardProps } from "./ActionCard.d"
import type { JSX } from "react"

import { FunctionComponent } from "react"

import cs from "classnames"

import styles from "./ActionCard.module.scss"

export const ActionCard: FunctionComponent<IActionCardProps> = ({
	icon: Icon,
	label,
	onClick,
	accent = false,
	className,
}): JSX.Element => {
	return (
		<button
			type="button"
			className={cs(styles.card, accent && styles.accent, className)}
			onClick={onClick}
			data-testid="ActionCard"
		>
			<Icon size={32} strokeWidth={1.5} />
			<span className={styles.label}>{label}</span>
		</button>
	)
}
