'use client';

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

export interface ProfileCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Whether to show the stats grid row (3 columns) */
  showStats?: boolean;
  /** Whether to show the action buttons row */
  showActions?: boolean;
}

/**
 * Loading placeholder for `ProfileCard`.
 *
 * @description
 * Mirrors the visual layout of `ProfileCard`: centered avatar, name + role
 * text lines, optional stats grid, and optional action buttons.
 *
 * @example
 * ```tsx
 * {isLoading ? <ProfileCardSkeleton showStats showActions /> : <ProfileCard {...data} />}
 * ```
 */
export function ProfileCardSkeleton({
  showStats = true,
  showActions = true,
  className,
  ...props
}: ProfileCardSkeletonProps) {
  return (
    <Card className={cn('w-full', className)} {...props}>
      <CardContent className="pt-6 flex flex-col items-center text-center gap-3">
        {/* Avatar */}
        <Skeleton className="size-16 rounded-full" />

        {/* Name + role */}
        <div className="space-y-1.5 w-full flex flex-col items-center">
          <Skeleton className="h-4 w-32" />
          <Skeleton className="h-3 w-24" />
          {/* Optional department line */}
          <Skeleton className="h-3 w-20" />
        </div>

        {/* Stats grid */}
        {showStats && (
          <div className="w-full grid grid-cols-3 divide-x divide-border border-y border-border py-3 mt-1">
            {[0, 1, 2].map(i => (
              <div key={i} className="flex flex-col items-center gap-1 px-2">
                <Skeleton className="h-5 w-10" />
                <Skeleton className="h-2.5 w-12" />
              </div>
            ))}
          </div>
        )}

        {/* Action buttons */}
        {showActions && (
          <div className="flex gap-2 w-full">
            <Skeleton className="h-8 flex-1 rounded-md" />
            <Skeleton className="h-8 flex-1 rounded-md" />
          </div>
        )}
      </CardContent>
    </Card>
  );
}