import { cn } from "@/lib/utils";

interface Props {
  showCreator?: boolean;
  count?: number;
}

// Shimmer overlay for a more premium loading effect
const shimmerClass =
  "relative overflow-hidden before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_1.5s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent";

// Memo card skeleton component for list loading states
const MemoCardSkeleton = ({ showCreator = false, index = 0 }: { showCreator?: boolean; index?: number }) => (
  <div
    className={cn(
      "relative flex flex-col justify-start items-start bg-card w-full px-4 py-3 mb-2 gap-2 rounded-lg border border-border",
      shimmerClass,
    )}
  >
    {/* Header section */}
    <div className="w-full flex flex-row justify-between items-center gap-2">
      <div className="w-auto max-w-[calc(100%-8rem)] grow flex flex-row justify-start items-center">
        {showCreator ? (
          <div className="w-full flex flex-row justify-start items-center gap-2">
            <div className="w-8 h-8 rounded-full bg-muted animate-pulse shrink-0" />
            <div className="w-full flex flex-col justify-center items-start gap-1">
              <div className="h-4 w-24 bg-muted animate-pulse rounded" />
              <div className="h-3 w-16 bg-muted/70 animate-pulse rounded" />
            </div>
          </div>
        ) : (
          <div className="h-4 w-32 bg-muted animate-pulse rounded" />
        )}
      </div>
      {/* Action buttons skeleton */}
      <div className="flex flex-row gap-2">
        <div className="w-4 h-4 bg-muted animate-pulse rounded" />
        <div className="w-4 h-4 bg-muted animate-pulse rounded" />
      </div>
    </div>

    {/* Content section */}
    <div className="w-full flex flex-col gap-2">
      <div className="space-y-2">
        <div className={cn("h-4 bg-muted animate-pulse rounded", index % 3 === 0 ? "w-full" : index % 3 === 1 ? "w-4/5" : "w-5/6")} />
        <div className={cn("h-4 bg-muted/80 animate-pulse rounded", index % 2 === 0 ? "w-3/4" : "w-4/5")} />
        {index % 2 === 0 && <div className="h-4 w-2/3 bg-muted/60 animate-pulse rounded" />}
      </div>
    </div>

    {/* Footer: reactions/actions */}
    <div className="w-full flex flex-row gap-3 pt-1">
      <div className="h-3 w-8 bg-muted/40 animate-pulse rounded" />
      <div className="h-3 w-8 bg-muted/40 animate-pulse rounded" />
      <div className="h-3 w-8 bg-muted/40 animate-pulse rounded" />
    </div>
  </div>
);

/**
 * Skeleton loading state for memo lists.
 * Features a shimmer gradient overlay for a premium feel.
 * Use this for initial memo list loading and pagination.
 * For generic page/route loading, use Spinner instead.
 */
const Skeleton = ({ showCreator = false, count = 4 }: Props) => (
  <div className="w-full max-w-2xl mx-auto">
    {Array.from({ length: count }).map((_, index) => (
      <MemoCardSkeleton key={index} showCreator={showCreator} index={index} />
    ))}
  </div>
);

export default Skeleton;
