import type { IStatsGridProps } from "./StatsGrid.d"
import type { JSX } from "react"

import { FunctionComponent } from "react"

import { useCountUp } from "@shared/hooks/useCountUp"

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

interface IStatCardProps {
	label: string
	value: number
	color?: string
}

const StatCard = ({ label, value, color }: IStatCardProps) => {
	const animatedValue = useCountUp(value)

	const style = color
		? ({ color, "--stat-accent": color } as React.CSSProperties)
		: undefined

	return (
		<div className={styles.card} style={style}>
			<span className={styles.value}>{animatedValue}</span>
			<span className={styles.label}>{label}</span>
		</div>
	)
}

export const StatsGrid: FunctionComponent<IStatsGridProps> = ({
	total,
	processing,
	done,
	failed,
}): JSX.Element => {
	return (
		<div className={styles.grid} data-testid="StatsGrid">
			<StatCard label="Всего проектов" value={total} />
			<StatCard label="В процессе" value={processing} color="var(--color-warning)" />
			<StatCard label="Готово" value={done} color="var(--color-success)" />
			<StatCard label="Ошибка" value={failed} color="var(--color-danger)" />
		</div>
	)
}
