import { type ReactNode } from 'react';

import MetricDelta from '@/Components/Shared/MetricDelta';
import { CountUp } from '@/Components/ui/count-up';
import { cn } from '@/lib/utils';

interface DataCardProps {
  title: string;
  /** Optional element rendered after the title text, e.g. a ContextualHelp popover. */
  titleExtra?: ReactNode;
  value: string | number;
  subtitle?: string;
  delta?: number;
  deltaFormat?: 'percent' | 'number' | 'decimal';
  className?: string;
}

export default function DataCard({
  title,
  titleExtra,
  value,
  subtitle,
  delta,
  deltaFormat,
  className,
}: DataCardProps) {
  const borderAccent =
    delta !== undefined
      ? Math.abs(delta) >= 50
        ? delta > 0
          ? 'border-l-2 border-l-emerald-500 dark:border-l-emerald-400' /* semantic: success */
          : 'border-l-2 border-l-red-500 dark:border-l-red-400' /* semantic: danger */
        : Math.abs(delta) >= 20
          ? delta > 0
            ? 'border-l-2 border-l-emerald-400/60 dark:border-l-emerald-300/60' /* semantic: success */
            : 'border-l-2 border-l-red-400/60 dark:border-l-red-300/60' /* semantic: danger */
          : ''
      : '';

  return (
    <div className={cn('rounded-lg border bg-card p-4', borderAccent, className)}>
      <p className="text-sm text-muted-foreground flex items-center gap-1">
        {title}
        {titleExtra}
      </p>
      <p className="text-2xl font-semibold mt-1">
        {typeof value === 'number' ? <CountUp end={value} /> : value}
      </p>
      {subtitle && <p className="text-xs text-muted-foreground mt-1">{subtitle}</p>}
      {delta !== undefined && (
        <div className="mt-1">
          <MetricDelta value={delta} format={deltaFormat} />
        </div>
      )}
    </div>
  );
}