import { Skeleton } from "@/components/ui/skeleton";

export function AcademyListSkeleton({ count = 3 }: { count?: number }) {
  return (
    <div className="mt-5 space-y-6 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mb-24">
      <Skeleton className="h-4 w-32" />
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} className="space-y-3">
          <div className="flex items-center gap-3">
            <Skeleton className="h-12 w-12 rounded-full" />
            <div className="flex-1 space-y-2">
              <Skeleton className="h-4 w-1/3" />
              <Skeleton className="h-3 w-1/4" />
            </div>
          </div>
          <Skeleton className="h-64 w-full rounded-2xl" />
          <Skeleton className="h-4 w-full" />
          <Skeleton className="h-4 w-2/3" />
        </div>
      ))}
    </div>
  );
}

export function AcademyProfileHeadSkeleton() {
  return (
    <div className="w-full px-4 py-2 space-y-4">
      <div className="flex justify-end">
        <Skeleton className="h-4 w-48" />
      </div>
      <div className="flex items-center justify-between">
        <div className="flex gap-5">
          <Skeleton className="h-10 w-14" />
          <Skeleton className="h-10 w-14" />
          <Skeleton className="h-10 w-14" />
        </div>
        <Skeleton className="h-[120px] w-[120px] rounded-xl" />
      </div>
      <div className="grid grid-cols-3 gap-4">
        <Skeleton className="h-6 w-full" />
        <Skeleton className="h-6 w-full" />
        <Skeleton className="h-6 w-full" />
      </div>
      <Skeleton className="h-16 w-full" />
      <div className="grid grid-cols-2 md:grid-cols-4 gap-2">
        <Skeleton className="h-8 w-full rounded-xl" />
        <Skeleton className="h-8 w-full rounded-xl" />
        <Skeleton className="h-8 w-full rounded-xl" />
        <Skeleton className="h-8 w-full rounded-xl" />
      </div>
    </div>
  );
}

export function AcademyPackageListSkeleton({ count = 4 }: { count?: number }) {
  return (
    <div className="px-4 space-y-4 mt-4">
      {Array.from({ length: count }).map((_, i) => (
        <div
          key={i}
          className="p-4 border rounded-3xl border-border-primary-light w-full"
        >
          <div className="flex items-center justify-between gap-4">
            <div className="flex items-center gap-3 flex-1">
              <Skeleton className="h-12 w-12 rounded-xl shrink-0" />
              <div className="flex-1 space-y-2">
                <Skeleton className="h-4 w-2/3" />
                <Skeleton className="h-3 w-full" />
              </div>
            </div>
            <div className="space-y-2 shrink-0">
              <Skeleton className="h-3 w-16 ml-auto" />
              <Skeleton className="h-4 w-20 ml-auto" />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

export function AcademyCourseDetailSkeleton() {
  return (
    <div className="max-w-7xl mx-auto px-4 py-6 space-y-6">
      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div className="lg:col-span-2 space-y-4">
          <Skeleton className="h-72 w-full rounded-xl" />
          <Skeleton className="h-32 w-full rounded-xl" />
        </div>
        <div className="space-y-4">
          <Skeleton className="h-96 w-full rounded-xl" />
        </div>
      </div>
    </div>
  );
}
