import * as React from 'react';
import { motion } from 'motion/react';

import { cn } from '@workspace/ui/lib/utils';

export interface MetricsKPIProps extends React.HTMLAttributes<HTMLDivElement> {
  value: string; // The primary KPI value (e.g., "$350/mo")
  label: string; // The label/description (e.g., "after year 1")
  isLoading?: boolean; // Optional loading state
}

export function MetricsKPI({ className, value, label, isLoading = false, ...props }: MetricsKPIProps) {
  return (
    <div
      className={cn(
        "flex flex-col items-center justify-center p-4",
        className
      )}
      {...props}
    >
      {isLoading ? (
        // Simple loading skeleton
        <>
          <div className="h-8 w-24 bg-muted rounded-md mb-2 animate-pulse" />
          <div className="h-4 w-16 bg-muted rounded-md animate-pulse" />
        </>
      ) : (
        <>
          <motion.span
            className="text-2xl md:text-3xl font-bold tabular-nums"
            initial={{ opacity: 0, y: 10 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.5 }}
          >
            {value}
          </motion.span>
          <span className="text-sm text-muted-foreground mt-1">{label}</span>
        </>
      )}
    </div>
  );
}