import * as React from 'react';
import { cn } from '@/lib/utils';

/**
 * SkeletonProps - Propriétés du composant Skeleton
 *
 * @interface SkeletonProps
 * @extends React.HTMLAttributes<HTMLDivElement>
 */
export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
  /**
   * Variant de forme du skeleton
   *
   * - `text`: Forme de texte (arrondi, hauteur fixe)
   * - `circular`: Forme circulaire (pour avatars)
   * - `rectangular`: Forme rectangulaire arrondie (par défaut)
   *
   * @default 'rectangular'
   */
  variant?: 'text' | 'circular' | 'rectangular';

  /**
   * Largeur du skeleton (string CSS ou nombre)
   *
   * @example
   * ```tsx
   * <Skeleton width="100%" height={20} />
   * <Skeleton width={200} height={100} />
   * ```
   */
  width?: string | number;

  /**
   * Hauteur du skeleton (string CSS ou nombre)
   */
  height?: string | number;
}

/**
 * Skeleton - Composant de placeholder animé avec design system Kodo
 *
 * Composant de skeleton pour afficher des placeholders pendant le chargement.
 * Utilise une animation pulse pour indiquer le chargement.
 *
 * @example
 * ```tsx
 * // Skeleton rectangulaire
 * <Skeleton width="100%" height={100} />
 *
 * // Skeleton de texte
 * <Skeleton variant="text" width="80%" />
 *
 * // Skeleton circulaire (avatar)
 * <Skeleton variant="circular" width={40} height={40} />
 * ```
 *
 * @component
 * @param {SkeletonProps} props - Propriétés du composant
 * @returns {JSX.Element} Élément div avec animation pulse
 */

const Skeleton = React.forwardRef<HTMLDivElement, SkeletonProps>(
  ({ variant = 'rectangular', width, height, className, ...props }, ref) => {
    const baseClasses = 'animate-pulse bg-kodo-steel/50';

    const variantClasses = {
      text: 'rounded h-4 w-full',
      circular: 'rounded-full',
      rectangular: 'rounded-lg',
    };

    const style = {
      width,
      height,
    };

    return (
      <div
        ref={ref}
        className={cn(baseClasses, variantClasses[variant], className)}
        style={style}
        {...props}
      />
    );
  },
);
Skeleton.displayName = 'Skeleton';

export { Skeleton };
