'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 QuickActionCardSkeletonProps extends React.HTMLAttributes<HTMLDivElement> {}

/**
 * Loading placeholder for `QuickActionCard`.
 *
 * @description
 * Mirrors the visual layout of `QuickActionCard`: icon block + optional badge
 * in the top row, title + description text, and an action button.
 *
 * @example
 * ```tsx
 * {isLoading ? <QuickActionCardSkeleton /> : <QuickActionCard {...data} />}
 * ```
 */
export function QuickActionCardSkeleton({ className, ...props }: QuickActionCardSkeletonProps) {
  return (
    <Card className={cn('w-full', className)} {...props}>
      <CardContent className="pt-6 flex flex-col items-start gap-4">
        {/* Icon + badge row */}
        <div className="flex items-start justify-between w-full">
          <Skeleton className="size-10 rounded-[var(--radius)]" />
          <Skeleton className="h-5 w-14 rounded-full" />
        </div>

        {/* Title + description */}
        <div className="space-y-1.5 flex-1 w-full">
          <Skeleton className="h-4 w-3/4" />
          <Skeleton className="h-3 w-full" />
          <Skeleton className="h-3 w-5/6" />
        </div>

        {/* Action button */}
        <Skeleton className="h-8 w-full rounded-md" />
      </CardContent>
    </Card>
  );
}