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

const TotalOrders = ({orders}:{orders:any}) => {
  const t = useTranslations();

  const cards = [
    {
      title: t("orders.prepared"),
      value: orders?.prepared?.current,
      percentage: calcPercentage(orders?.prepared) ,
    },
    {
      title: t("orders.shipped"),
      value: orders?.shipped?.current,
      percentage: calcPercentage(orders?.shipped) ,
    },
    {
      title: t("orders.completed"),
      value: orders?.completed?.current,
      percentage: calcPercentage(orders?.completed) ,
    },
    {
      title:t("orders.canceled"),
      value: orders?.canceled?.current,
      percentage: calcPercentage(orders?.canceled) ,
    },
  ];

  return (
    <div className="col-span-2 grid md:grid-cols-2 gap-6 app-card-wrapper">
        <div className="p-6 border md:col-span-2 flex items-center gap-4 border-platinum rounded-[20px]">
          <figure className="icon-wrapper"><OrdersListIcon/></figure>
          <div className=" flex-1">
            <div className="flex items-center justify-between mb-3">
                <h3 >{t("orders.total_order")}</h3>
                <LocalePath href={"/received-orders"} className="more-btn">
                    {t("buttons.more")}
                    <ArrowLeftIcon />
                </LocalePath>
            </div>
            <div className="flex items-center gap-2">
                <h5 className="text-3xl font-bold">{orders?.total?.current}</h5>
                <p className={`compare-note`}>
                    <span className={`${10 >= 0? "bg-secSuccess text-success": "text-error bg-error-100"}`}          >
                    {orders?.total?.growth}%
                    </span>
                    {t("Text.previous_compare")}
                </p>
            </div>
          </div>
        </div>
      {cards?.map((data, index) => (
        <div key={`order-card-${index}`} className="p-6 border border-platinum rounded-[20px]">
          <div className="space-y-3">
            <h3>{data.title}</h3>
            <div className="flex items-center gap-2">
                <p className="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>
        </div>
      ))}
    </div>
  );
};

export default TotalOrders;