'use client';

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

export interface ActivityCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Number of skeleton rows to display (mirrors `maxItems` on ActivityCard) */
  rows?: number;
}

/**
 * Loading placeholder for `ActivityCard`.
 *
 * @description
 * Mirrors the visual layout of `ActivityCard` with pulsing skeletons:
 * avatar circle + two text lines + an optional badge pill on the right.
 * Drop-in replacement while data is fetching.
 *
 * @example
 * ```tsx
 * {isLoading ? <ActivityCardSkeleton rows={5} /> : <ActivityCard items={items} />}
 * ```
 */
export function ActivityCardSkeleton({ rows = 5, className, ...props }: ActivityCardSkeletonProps) {
  return (
    <Card className={cn('w-full', className)} {...props}>
      <CardHeader>
        {/* Title */}
        <Skeleton className="h-5 w-40" />
      </CardHeader>

      <CardContent className="px-6 pb-6">
        <ul className="space-y-4">
          {Array.from({ length: rows }).map((_, i) => (
            <li key={i} className="flex items-start gap-3">
              {/* Avatar circle */}
              <Skeleton className="size-8 rounded-full shrink-0" />

              <div className="flex-1 min-w-0 space-y-1.5">
                {/* Action line — name + action text */}
                <Skeleton className="h-3.5 w-4/5" />
                {/* Timestamp */}
                <Skeleton className="h-3 w-20" />
              </div>

              {/* Badge pill */}
              <Skeleton className="h-5 w-16 shrink-0 rounded-full" />
            </li>
          ))}
        </ul>
      </CardContent>
    </Card>
  );
}