"use client";

const badgeColors: Record<string, string> = {
  success: "bg-green-100 text-green-800",
  failure: "bg-red-100 text-red-800",
  warning: "bg-yellow-100 text-yellow-800",
  info: "bg-blue-100 text-blue-800",
};

interface CardProps {
  title: string;
  value: string | number;
  badge: string;
  badgeColor?: "success" | "failure" | "warning" | "info";
}

const Card: React.FC<CardProps> = ({
  title,
  value,
  badge,
  badgeColor = "success",
}) => {
  return (
    <div className="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 space-y-2 border border-gray-200">
      {/* Title */}
      <p className="text-sm text-gray-500 dark:text-gray-400">{title}</p>

      {/* Value */}
      <h2 className="text-2xl font-bold text-gray-900 dark:text-white">
        {value}
      </h2>

      {/* Badge */}
      <span
        className={`inline-block px-3 py-1 rounded-full text-sm font-medium ${badgeColors[badgeColor]}`}
      >
        {badge}
      </span>
    </div>
  );
};

export default Card;