import { ReactNode } from 'react';
import clsx from 'clsx';
import { Skeleton } from '@theme/components';

interface SectionSkeletonProps {
  active?: boolean;
  children?: ReactNode;
  contentClassName?: string;
}

export const SectionSkeleton = ({
  active = false,
  children,
  contentClassName
}: SectionSkeletonProps) => {
  return (
    <div
      className={clsx(
        'mb-4 overflow-hidden rounded-2xl bg-white last:mb-0',
        active
          ? 'shadow-[0_12px_40px_-16px_rgba(0,0,0,0.16)] ring-1 ring-black-800/10'
          : 'shadow-[0_1px_3px_rgba(0,0,0,0.04)] ring-1 ring-black/[0.04]'
      )}
      aria-busy="true"
      aria-label="Loading section"
    >
      <header className="flex items-center justify-between px-6 py-5 sm:px-7">
        <div className="flex items-center gap-3.5">
          <Skeleton className="h-8 w-8 rounded-full bg-gray-200" />
          <Skeleton className="h-5 w-44 bg-gray-200" />
        </div>
      </header>
      {(active || children) && (
        <div
          className={clsx(
            'border-t border-gray-100 px-6 py-6 sm:px-7',
            contentClassName
          )}
        >
          {children ?? <Skeleton className="h-14 w-full bg-gray-200" />}
        </div>
      )}
    </div>
  );
};

export default SectionSkeleton;