'use client';

import { motion } from 'framer-motion';

type ProfileTabSkeletonProps = {
  mode: 'overview' | 'analytics';
};

function SkeletonBlock({ className }: { className: string }) {
  return <div className={`animate-pulse rounded-lg bg-white/[0.08] ${className}`} />;
}

export default function ProfileTabSkeleton({ mode }: ProfileTabSkeletonProps) {
  const statsCount = mode === 'overview' ? 3 : 4;

  return (
    <motion.section
      initial={{ opacity: 0, y: 12 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.2 }}
      className="mx-auto max-w-6xl space-y-5"
    >
      <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-6 backdrop-blur-xl">
        <SkeletonBlock className="mb-3 h-4 w-32" />
        <SkeletonBlock className="mb-2 h-7 w-64" />
        <SkeletonBlock className="h-4 w-80 max-w-full" />
      </div>

      <div className={`grid grid-cols-1 gap-4 ${mode === 'overview' ? 'sm:grid-cols-2 xl:grid-cols-3' : 'sm:grid-cols-2 xl:grid-cols-4'}`}>
        {Array.from({ length: statsCount }).map((_, index) => (
          <div key={`skeleton-stat-${index}`} className="rounded-2xl border border-white/10 bg-black/40 p-5 backdrop-blur-md">
            <div className="mb-3 flex items-center justify-between">
              <SkeletonBlock className="h-9 w-9 rounded-xl" />
              <SkeletonBlock className="h-3 w-14" />
            </div>
            <SkeletonBlock className="mb-2 h-3 w-24" />
            <SkeletonBlock className="h-8 w-28" />
          </div>
        ))}
      </div>

      <div className="grid grid-cols-1 gap-4 xl:grid-cols-2">
        <div className="rounded-2xl border border-white/10 bg-black/35 p-5 backdrop-blur-md">
          <SkeletonBlock className="mb-4 h-4 w-36" />
          <SkeletonBlock className="h-64 w-full rounded-xl" />
        </div>
        <div className="rounded-2xl border border-white/10 bg-black/35 p-5 backdrop-blur-md">
          <SkeletonBlock className="mb-4 h-4 w-40" />
          <SkeletonBlock className="h-64 w-full rounded-xl" />
        </div>
      </div>

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
        {Array.from({ length: 4 }).map((_, index) => (
          <div key={`skeleton-dist-${index}`} className="rounded-2xl border border-white/10 bg-black/35 p-4 backdrop-blur-md">
            <SkeletonBlock className="mb-3 h-4 w-24" />
            <div className="space-y-2">
              <SkeletonBlock className="h-3 w-full" />
              <SkeletonBlock className="h-3 w-11/12" />
              <SkeletonBlock className="h-3 w-9/12" />
            </div>
          </div>
        ))}
      </div>
    </motion.section>
  );
}