'use client';

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

export interface ProjectCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Number of member avatar placeholders in the footer */
  memberCount?: number;
}

/**
 * Loading placeholder for `ProjectCard`.
 *
 * @description
 * Mirrors the visual layout of `ProjectCard`: title + badge in header,
 * progress bar in content, and member avatars + due date in footer.
 *
 * @example
 * ```tsx
 * {isLoading ? <ProjectCardSkeleton memberCount={3} /> : <ProjectCard {...data} />}
 * ```
 */
export function ProjectCardSkeleton({
  memberCount = 3,
  className,
  ...props
}: ProjectCardSkeletonProps) {
  return (
    <Card className={cn('w-full', className)} {...props}>
      <CardHeader>
        <div className="flex flex-col gap-1 min-w-0 flex-1">
          {/* Title */}
          <Skeleton className="h-5 w-3/4" />
          {/* Description */}
          <Skeleton className="h-3.5 w-full mt-0.5" />
        </div>
        {/* Status badge */}
        <Skeleton className="h-5 w-20 rounded-full shrink-0" />
      </CardHeader>

      <CardContent className="space-y-4">
        <div className="space-y-1.5">
          {/* "Progress" label + % */}
          <div className="flex justify-between">
            <Skeleton className="h-3 w-14" />
            <Skeleton className="h-3 w-8" />
          </div>
          {/* Progress bar */}
          <Skeleton className="h-2 w-full rounded-full" />
        </div>
      </CardContent>

      <CardFooter className="flex items-center justify-between">
        {/* Member avatars */}
        <div className="flex -space-x-2">
          {Array.from({ length: Math.min(memberCount, 4) }).map((_, i) => (
            <Skeleton key={i} className="size-7 rounded-full border-2 border-background" />
          ))}
        </div>
        {/* Due date */}
        <Skeleton className="h-3 w-20" />
      </CardFooter>
    </Card>
  );
}