import {
  PLAYER_ITEM_SIZE_CONFIG,
  SKELETON_BASE,
  SKELETON_BG,
  type PlayerItemSize,
} from './skeletonConfig';

interface PlayerItemSkeletonProps {
  variant?: 'default' | 'compact' | 'booking';
  size?: PlayerItemSize;
  showSecondaryData?: boolean;
  showActions?: boolean;
  hasExpandableContent?: boolean;
  className?: string;
}

export default function PlayerItemSkeleton({
  variant = 'default',
  size = 'md',
  showSecondaryData = false,
  showActions = false,
  hasExpandableContent = false,
  className = ''
}: PlayerItemSkeletonProps) {
  const config = PLAYER_ITEM_SIZE_CONFIG[size];

  const getContainerStyles = () => {
    let base = `flex items-center ${config.spacing} ${config.container} rounded-xl`;
    
    switch (variant) {
      case 'booking':
        base += ' bg-white border border-slate-200';
        break;
      case 'compact':
        base = `flex items-center ${config.spacing} p-2 rounded-lg bg-slate-50`;
        break;
      default:
        base += ' bg-white border border-slate-200';
    }
    
    return `${base} ${className}`;
  };

  return (
    <div className="w-full">
      <div className={getContainerStyles()}>
        {/* Pill skeleton */}
        <div className={`${config.pill} rounded-full ${SKELETON_BG} ${SKELETON_BASE} shadow-lg`} />

        {/* Name and level skeleton */}
        <div className="flex-1">
          <div className={`${config.nameHeight} ${SKELETON_BG} rounded ${config.nameWidth} mb-2 ${SKELETON_BASE}`} />
          <div className="flex gap-2">
            <div className={`${config.levelHeight} ${SKELETON_BG} rounded-full ${config.levelWidth} ${SKELETON_BASE}`} />
            <div className={`${config.levelHeight} ${SKELETON_BG} rounded-full ${config.levelWidth} ${SKELETON_BASE}`} />
          </div>
        </div>

        {/* Secondary data skeleton */}
        {showSecondaryData && (
          <div className="flex gap-2">
            <div className={`w-16 h-4 ${SKELETON_BG} rounded ${SKELETON_BASE}`} />
          </div>
        )}

        {/* Actions skeleton */}
        {showActions && (
          <div className={`w-8 h-8 rounded-full ${SKELETON_BG} ${SKELETON_BASE}`} />
        )}

        {/* Expand arrow skeleton */}
        {hasExpandableContent && (
          <div className={`w-8 h-8 rounded-full ${SKELETON_BG} ${SKELETON_BASE}`} />
        )}
      </div>
    </div>
  );
}