import { cn } from "@/lib/utils";
import type { HTMLAttributes } from "react";

interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
  rounded?: "sm" | "md" | "lg" | "full";
}

const radii = {
  sm: "rounded-md",
  md: "rounded-xl",
  lg: "rounded-2xl",
  full: "rounded-full",
};

export function Skeleton({ className, rounded = "md", ...props }: SkeletonProps) {
  return (
    <div
      className={cn("skeleton", radii[rounded], className)}
      aria-busy="true"
      aria-live="polite"
      {...props}
    />
  );
}

export function CardSkeleton({ className }: { className?: string }) {
  return (
    <div
      className={cn(
        "rounded-3xl border border-slate-200/70 bg-white p-7 shadow-soft dark:border-white/[0.06] dark:bg-white/[0.04]",
        className,
      )}
    >
      <Skeleton className="h-12 w-12" rounded="lg" />
      <Skeleton className="mt-5 h-5 w-3/4" />
      <Skeleton className="mt-3 h-3 w-full" />
      <Skeleton className="mt-2 h-3 w-5/6" />
    </div>
  );
}

export function StatCardSkeleton() {
  return (
    <div className="rounded-3xl border border-slate-200/70 bg-white p-6 shadow-soft dark:border-white/[0.06] dark:bg-white/[0.04]">
      <div className="flex items-start justify-between">
        <Skeleton className="h-11 w-11" rounded="lg" />
        <Skeleton className="h-5 w-12" rounded="full" />
      </div>
      <Skeleton className="mt-5 h-3 w-24" />
      <Skeleton className="mt-2 h-7 w-32" />
    </div>
  );
}

export function TransactionRowSkeleton() {
  return (
    <div className="flex items-center gap-3 rounded-2xl px-3 py-3">
      <Skeleton className="h-10 w-10" rounded="full" />
      <div className="min-w-0 flex-1 space-y-2">
        <Skeleton className="h-3 w-1/3" />
        <Skeleton className="h-3 w-1/2" />
      </div>
      <Skeleton className="hidden h-5 w-20 sm:block" rounded="full" />
      <div className="space-y-1.5 text-end">
        <Skeleton className="h-3 w-16" />
        <Skeleton className="h-2.5 w-12" />
      </div>
    </div>
  );
}

export function RecipientCardSkeleton() {
  return (
    <div className="rounded-3xl border border-slate-200/70 bg-white p-6 shadow-soft dark:border-white/[0.06] dark:bg-white/[0.04]">
      <div className="flex items-start gap-3">
        <Skeleton className="h-12 w-12" rounded="full" />
        <div className="flex-1 space-y-2">
          <Skeleton className="h-4 w-2/3" />
          <Skeleton className="h-3 w-1/2" />
        </div>
        <Skeleton className="h-5 w-14" rounded="full" />
      </div>
      <Skeleton className="mt-5 h-3 w-1/3" />
      <div className="mt-5 flex gap-2">
        <Skeleton className="h-8 w-16" rounded="full" />
        <Skeleton className="h-8 w-16" rounded="full" />
        <Skeleton className="h-8 w-16" rounded="full" />
      </div>
    </div>
  );
}