import { Card } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { cn } from "@/lib/utils";
import { SummaryCardProps } from "@/types/app";
import { faArrowsRotate } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

export default function SummaryCard({
  title,
  value,
  icon,
  color,
  isPending,
}: SummaryCardProps) {
  return (
    <Card className="rounded border-none bg-white p-6 shadow">
      <div className="flex items-center justify-between">
        <div>
          <p className="text-gray-500">{title}</p>
          {isPending ? (
            <Skeleton className="h-8 w-28" />
          ) : (
            <p className="animate-fade-in text-2xl font-semibold">{value}</p>
          )}
        </div>
        <p className="text-4xl">
          <FontAwesomeIcon
            className={cn(color, "duration-200", {
              "animate-spin text-gray-300 !duration-1000": isPending,
            })}
            icon={isPending ? faArrowsRotate : icon}
          />
        </p>
      </div>
    </Card>
  );
}