interface SkeletonBlockProps {
  className?: string;
}

export function SkeletonBlock({ className = '' }: SkeletonBlockProps) {
  return (
    <div
      className={`animate-pulse rounded-[var(--radius-md)] bg-background-secondary/60 ${className}`}
      aria-hidden
    />
  );
}

export function KpiCardSkeleton({ tall = false }: { tall?: boolean }) {
  return (
    <div
      className={`flex h-full min-h-0 flex-col rounded-[var(--radius-lg)] border border-card-border bg-card p-4 ${tall ? '' : ''}`}
    >
      <SkeletonBlock className="h-4 w-2/3" />
      <SkeletonBlock className={`${tall ? 'mt-4 flex-1' : 'h-8 w-16 mt-3'}`} />
      {!tall ? <SkeletonBlock className="h-3 w-1/3 mt-2" /> : null}
    </div>
  );
}

export function ChartCardSkeleton() {
  return (
    <div className="flex h-full min-h-0 flex-col rounded-[var(--radius-lg)] border border-card-border bg-card p-4">
      <SkeletonBlock className="h-4 w-1/3" />
      <SkeletonBlock className="h-3 w-1/4 mt-2" />
      <SkeletonBlock className="min-h-0 flex-1 mt-4" />
    </div>
  );
}

export function ListRowSkeleton({ compact = false }: { compact?: boolean }) {
  return <SkeletonBlock className={`w-full ${compact ? 'h-8' : 'h-12'}`} />;
}
