import React from "react";
import Link from "next/link";
import { renderPieChart } from "./CustomPieChart";

interface OrderStatus {
  key: string;
  label: string;
  color: string;
}

interface OrderSummaryCardProps {
  title: string;
  chartData: any[];
  total: number;
  orderStatuses: OrderStatus[];
  orderCounts: Record<string, number>;
  viewAllLabel: string;
  subtitle: string;
  t: (key: string) => string;
}

const OrderSummaryCard: React.FC<OrderSummaryCardProps> = ({
  title,
  chartData,
  total,
  orderStatuses,
  orderCounts,
  viewAllLabel,
  subtitle,
  t
}) => {
  return (
    <div className="bg-white shadow-Shadow1 rounded-lg p-6 dark:bg-darkbg">
      {/* Header */}
      <div className="flex justify-between items-center mb-4">
        <h3 className="text-base font-medium text-neutrals800 dark:text-neutrals300">
          {title}
        </h3>
        {/* <Link
          href="#"
          className="text-base text-primary500 font-medium cursor-pointer underline dark:text-primary400"
        >
          {viewAllLabel}
        </Link> */}
      </div>

      {/* Subtitle */}
      <p className="text-sm text-center text-neutrals500 mt-10 mb-5 max-xl:mt-12 dark:text-neutrals300">
        {subtitle}
      </p>

      {/* Pie Chart */}
      <div className="flex justify-center">{renderPieChart(chartData, total,t)}</div>

      {/* Status Cards */}
      <div className="grid grid-cols-2 mt-7 text-sm gap-2.5 max-3xl:grid-cols-2 max-lg:grid-cols-2 max-sm:text-center max-[365px]:grid-cols-2">
        {orderStatuses.map((status) => (
          <div
            key={status.key}
            className="border border-neutrals100 px-3 rounded-e py-3 max-sm:px-2 dark:border-darkborder"
          >
            <p className={`text-2xl font-semibold mb-3`} style={{ color: status.color }}>
          {orderCounts[status.key] ?? 0}
        </p>
            <p className="text-neutrals500 text-sm dark:text-neutrals300">
              {status.label}
            </p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default OrderSummaryCard;