import React from "react";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/src/components/reusables/ui/card";
import Image from "next/image";

interface CardProps {
  title: string;
  statValue: number;
  profitValue?: number | undefined;
  currency?: string | undefined;
  iconPath?: string | undefined;
}

const Cards: React.FC<CardProps> = ({
  title,
  statValue,
  // profitValue,
  currency,
  iconPath,
}) => {
  // const textColor =
  //   profitValue && profitValue < 0 ? "text-red-500" : "text-green-500";
  // const formattedProfitValue =
  //   profitValue && profitValue >= 0 ? `+${profitValue}%` : `${profitValue}%`;

  const formattedStatValue = new Intl.NumberFormat("en-NG", {
    style: currency ? "currency" : undefined,
    currency: currency,
  }).format(statValue);

  return (
    <Card>
      <div className="flex items-center gap-4 p-4">
        {iconPath && (
          <div className="w-10 h-10 flex-shrink-0">
            <Image src={iconPath} width={40} height={40} alt="icon" />
          </div>
        )}

        <div className="flex-1">
          <CardHeader className="pb-1">
            <CardTitle className="text-sm font-medium text-black text-[10px]">
              {title}
            </CardTitle>
          </CardHeader>
          <CardContent className="pt-0">
            <div className="flex items-baseline justify-between">
              <div className="text-2xl font-semibold mr-1 text-[12px]">
                {formattedStatValue}
              </div>
              {/* {profitValue !== undefined && (
                <div className={`text-sm font-light ${textColor}`}>
                  {formattedProfitValue}
                </div>
              )} */}
            </div>
          </CardContent>
        </div>
      </div>
    </Card>
  );
};

export default Cards;
