import * as React from 'react';
import { Card, CardContent } from '../card';
import { Skeleton } from '../skeleton';
import { cn } from '../../shared/utils';

interface StatsCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Whether to show the icon placeholder on the right */
  showIcon?: boolean;
  /** Whether to show the trend indicator placeholder */
  showTrend?: boolean;
}

/**
 * Loading placeholder for `StatsCard`.
 *
 * @description
 * Mirrors the visual layout of `StatsCard`: title line, large value + optional
 * trend badge, description line below, and an optional icon block on the right.
 *
 * @example
 * ```tsx
 * {isLoading ? <StatsCardSkeleton showIcon showTrend /> : <StatsCard {...data} />}
 * ```
 */
function StatsCardSkeleton({
  showIcon = true,
  showTrend = true,
  className,
  ...props
}: StatsCardSkeletonProps) {
  return (
    <Card className={cn('', className)} {...props}>
      <CardContent className="p-4 sm:p-6">
        <div className="flex items-start justify-between gap-3">
          <div className="flex-1 min-w-0">
            {/* Title */}
            <Skeleton className="h-3.5 w-28 mb-2" />

            {/* Value + trend */}
            <div className="flex flex-wrap items-baseline gap-2">
              <Skeleton className="h-7 w-24" />
              {showTrend && <Skeleton className="h-4 w-14 rounded-full" />}
            </div>

            {/* Description */}
            <Skeleton className="h-3 w-32 mt-2" />
          </div>

          {/* Icon block */}
          {showIcon && <Skeleton className="size-9 sm:size-11 rounded-[var(--radius)] shrink-0" />}
        </div>
      </CardContent>
    </Card>
  );
}

StatsCardSkeleton.displayName = 'StatsCardSkeleton';

export { StatsCardSkeleton };
export type { StatsCardSkeletonProps };