import React from 'react';

/**
 * Skeleton — animated loading placeholder.
 *
 * Usage:
 *   <Skeleton className="pr:h-6 pr:w-40" />            // one bar
 *   <Skeleton.Card />                                   // card-shaped block
 *   <Skeleton.Dashboard />                              // dashboard hero + stat grid
 */
const Skeleton = ({ className = '', rounded = 'pr:rounded-lg' }) => (
  <div
    className={`pr:animate-pulse pr:bg-slate-200/80 ${rounded} ${className}`}
    aria-hidden="true"
  />
);

const SkeletonCard = ({ className = '' }) => (
  <div className={`pr:bg-white pr:rounded-2xl pr:shadow-xs pr:border pr:border-slate-200 pr:p-5 ${className}`}>
    <div className="pr:flex pr:items-start pr:justify-between pr:gap-3">
      <Skeleton className="pr:h-10 pr:w-10" rounded="pr:rounded-xl" />
      <Skeleton className="pr:h-6 pr:w-20" rounded="pr:rounded-full" />
    </div>
    <Skeleton className="pr:mt-4 pr:h-8 pr:w-24" />
    <Skeleton className="pr:mt-2 pr:h-4 pr:w-32" />
    <Skeleton className="pr:mt-4 pr:h-10 pr:w-full" rounded="pr:rounded-xl" />
  </div>
);

/** Mirrors the dashboard hero + quick-stats layout to avoid layout shift. */
const SkeletonDashboard = () => (
  <div className="pr:space-y-6" aria-busy="true" aria-label="Loading dashboard">
    <div className="pr:grid pr:grid-cols-1 pr:lg:grid-cols-4 pr:gap-4">
      <div className="pr:bg-white pr:rounded-2xl pr:shadow-xs pr:border pr:border-slate-200 pr:p-6 pr:flex pr:flex-col pr:items-center">
        <Skeleton className="pr:h-5 pr:w-28" rounded="pr:rounded-full" />
        <Skeleton className="pr:mt-5 pr:h-32 pr:w-32" rounded="pr:rounded-full" />
        <Skeleton className="pr:mt-4 pr:h-4 pr:w-36" />
        <Skeleton className="pr:mt-3 pr:h-8 pr:w-28" rounded="pr:rounded-full" />
      </div>
      <div className="pr:lg:col-span-3 pr:grid pr:grid-cols-1 pr:sm:grid-cols-2 pr:xl:grid-cols-3 pr:gap-4">
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
      </div>
    </div>
  </div>
);

Skeleton.Card = SkeletonCard;
Skeleton.Dashboard = SkeletonDashboard;

export default Skeleton;