'use client';

import React, { ReactNode } from 'react';
import { Skeleton } from 'antd';
import styles from './MetricCard.module.scss';

export interface MetricCardProps {
    icon?: ReactNode;
    label: string;
    value: ReactNode;
    subvalue?: string;
    helpTooltip?: ReactNode;
    loading?: boolean;
    variant?:
        | 'default'
        | 'financeiro'
        | 'projetos'
        | 'backlog'
        | 'sprints'
        | 'leads'
        | 'oportunidades'
        | 'chamados'
        | 'clientes'
        | 'bugs'
        | 'emAndamento'
        | 'concluidos'
        | 'pausados'
        | 'planejamento'
        | 'ativos'
        | 'gradientGray'
        | 'gradientRed';
    onClick?: () => void;
    className?: string;
}

export default function MetricCard({
    icon,
    label,
    value,
    subvalue,
    helpTooltip,
    loading = false,
    variant = 'default',
    onClick,
    className = '',
}: MetricCardProps) {
    const cardClasses = [
        styles.metricCard,
        variant !== 'default' && styles[variant],
        onClick && styles.clickable,
        className,
    ]
        .filter(Boolean)
        .join(' ');

    const iconClasses = [styles.metricCardIcon, variant !== 'default' && styles[variant]]
        .filter(Boolean)
        .join(' ');

    return (
        <div className={cardClasses} onClick={onClick}>
            <div className={iconClasses}>{icon}</div>
            <div className={styles.metricCardContent}>
                <div className={styles.metricCardLabel}>
                    {label}
                    {helpTooltip ? (
                        <span className={styles.metricCardHelp}>{helpTooltip}</span>
                    ) : null}
                </div>
                <div className={styles.metricCardValue}>
                    {loading ? (
                        <Skeleton active title={{ width: '70%' }} paragraph={false} />
                    ) : (
                        value
                    )}
                </div>
                {subvalue && !loading && <div className={styles.metricCardSubvalue}>{subvalue}</div>}
            </div>
        </div>
    );
}