import React from "react";
import { Link } from "react-router-dom";
import "../styles/StatCard.css";

const StatCard = ({ stat, index }) => {
  const content = (
    <div className="stat-card-content">
      <div className="stat-card-icon" title={stat.label}>{stat.icon}</div>
      <div className="stat-card-info">
        <div className="stat-card-label">{stat.label}</div>
        <div className="stat-card-value">{stat.value}</div>
        {stat.subtitle && (
          <div className="stat-card-subtitle">{stat.subtitle}</div>
        )}
        {stat.description && (
          <p className="stat-card-description" title={stat.description}>
            {stat.description}
          </p>
        )}
        {(() => {
          const change = stat.change;
          const isZeroChange = !change || ["0", "+0", "-0", "0%", "+0%", "-0%"].includes(String(change).trim());
          if (isZeroChange) return null;
          return <div className={`stat-card-change ${stat.trend}`}>{change}</div>;
        })()}
      </div>
    </div>
  );

  const className = `stat-card ${stat.to ? "stat-card--clickable" : ""}`.trim();

  if (stat.to) {
    return (
      <Link
        to={stat.to}
        className={className}
        style={{ animationDelay: `${index * 0.1}s` }}
        title="View audits status"
      >
        {content}
      </Link>
    );
  }

  return (
    <div className={className} style={{ animationDelay: `${index * 0.1}s` }}>
      {content}
    </div>
  );
};

export default StatCard;
