'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 FeatureCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Whether to show the footer action button placeholder */
  showAction?: boolean;
}

/**
 * Loading placeholder for `FeatureCard`.
 *
 * @description
 * Mirrors the visual layout of `FeatureCard`: icon block + title + badge in
 * the header, description text in content, and an optional action button footer.
 *
 * @example
 * ```tsx
 * {isLoading ? <FeatureCardSkeleton showAction /> : <FeatureCard {...data} />}
 * ```
 */
export function FeatureCardSkeleton({
  showAction = true,
  className,
  ...props
}: FeatureCardSkeletonProps) {
  return (
    <Card className={cn('flex flex-col h-full', className)} {...props}>
      <CardHeader>
        <div className="flex items-center gap-3">
          {/* Icon block */}
          <Skeleton className="size-10 rounded-[var(--radius)] shrink-0" />

          {/* Title + badge */}
          <div className="flex flex-wrap items-center gap-2 min-w-0">
            <Skeleton className="h-4 w-28" />
            <Skeleton className="h-4 w-12 rounded-full" />
          </div>
        </div>
      </CardHeader>

      <CardContent className="flex-1 space-y-2">
        <Skeleton className="h-3.5 w-full" />
        <Skeleton className="h-3.5 w-5/6" />
        <Skeleton className="h-3.5 w-4/6" />
      </CardContent>

      {showAction && (
        <CardFooter>
          <Skeleton className="h-9 w-full rounded-md" />
        </CardFooter>
      )}
    </Card>
  );
}