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

interface ListingCardProps {
  title: string;
  subtitle: string;
  chartData: any[];
  total: number;
  activeCount: number;
  expireCount: number;
  activeColor: string;
  expireColor: string;
  linkLabel: string;
  t: (key: string) => string;
}

const ListingCard: React.FC<ListingCardProps> = ({
  title,
  subtitle,
  chartData,
  total,
  activeCount,
  expireCount,
  activeColor,
  expireColor,
  linkLabel,
  t
}) => {
  return (
    <div className="border border-neutrals100 dark:border-darkborder p-6">
      <h3 className="text-base font-semibold text-center text-neutrals800 dark:text-neutrals300 mb-1">
        {title}
      </h3>
      <p className="text-sm text-center text-neutrals500 dark:text-neutrals300 mb-3">
        {subtitle}
      </p>

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

      <div className="grid grid-cols-2 text-center mt-4 text-sm gap-2.5">
        <div className="border border-neutrals100 px-5 rounded-e py-3 dark:border-darkborder">
          <p className={`text-2xl font-semibold mb-3`} style={{ color: activeColor }}>
            {activeCount}
          </p>
          <p className="text-neutrals500 text-sm dark:text-neutrals300">{chartData[0].name}</p>
        </div>

        <div className="border border-neutrals100 px-5 rounded-e py-3 dark:border-darkborder">
          <p className={`text-2xl font-semibold mb-3`} style={{ color: expireColor }}>
            {expireCount}
          </p>
          <p className="text-neutrals500 text-sm dark:text-neutrals300">{chartData[1].name}</p>
        </div>
      </div>

      {/* <Link
        href="#"
        className="text-center w-fit m-auto mt-3 block text-base text-primary500 font-semibold underline dark:text-primary400"
      >
        {linkLabel}
      </Link> */}
    </div>
  );
};

export default ListingCard;