import { ArrowLeftIcon } from "@/assets/svgs/TraderIcons";
import LocalePath from "@/components/UiComponents/LocalePath";
import { useTranslations } from "next-intl";
import React from "react";

const StatisticsCard = ({ data }: { data: any }) => {
  const t = useTranslations();
  return (
    <div className="app-card-wrapper">
      <div className="flex items-start justify-between mb-4">
        <span className="icon-wrapper">{data.icon}</span>
        {data?.href && (
          <LocalePath
            href={data?.href}
            className="more-btn"
          >
            {t("buttons.more")}
            <ArrowLeftIcon />
          </LocalePath>
        )}
      </div>
      <div className="space-y-3">
        <h3 className="text-xs md:text-lg font-medium">{data.title}</h3>
        <p className="text-sm md:text-2xl font-bold">{data.value}</p>
        <p className={`compare-note`}>
          <span className={`${data.percentage >= 0? "bg-secSuccess text-success": "text-error bg-error-100"}`}>
            {data.percentage}%
          </span>
          {t("Text.previous_compare")}
        </p>
      </div>
    </div>
  );
};

export default StatisticsCard;