interface LoadingProps {
  size?: 'sm' | 'md' | 'lg';
}

const spinnerSizes = { sm: 16, md: 28, lg: 40 };

export function Loading({ size = 'md' }: LoadingProps) {
  const px = spinnerSizes[size];
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ position: 'relative', width: px, height: px }}>
        <div style={{
          position: 'absolute', inset: 0,
          border: '2px solid var(--color-surface-elevated)',
          borderRadius: '50%',
        }} />
        <div style={{
          position: 'absolute', inset: 0,
          border: '2px solid transparent',
          borderTopColor: 'var(--color-desire)',
          borderRightColor: 'var(--color-desire-glow)',
          borderRadius: '50%',
          animation: 'spin 0.8s linear infinite',
        }} />
      </div>
    </div>
  );
}

export function LoadingPage() {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      minHeight: '60dvh', gap: '16px',
    }}>
      <Loading size="lg" />
      <p style={{
        color: 'var(--color-text-muted)',
        fontSize: '14px',
        fontFamily: 'var(--font-body)',
        animation: 'fadeIn 1s ease-in-out infinite alternate',
      }}>
        Loading...
      </p>
    </div>
  );
}

export function LoadingCard() {
  return (
    <div style={{
      borderRadius: '16px',
      overflow: 'hidden',
      background: 'var(--color-surface)',
      border: '1px solid var(--glass-border)',
    }}>
      <div className="shimmer" style={{ aspectRatio: '3/4' }} />
      <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '10px' }}>
        <div className="shimmer" style={{ height: '20px', width: '70%', borderRadius: '8px' }} />
        <div className="shimmer" style={{ height: '14px', width: '45%', borderRadius: '8px' }} />
        <div style={{ display: 'flex', gap: '8px' }}>
          <div className="shimmer" style={{ height: '24px', width: '56px', borderRadius: '12px' }} />
          <div className="shimmer" style={{ height: '24px', width: '72px', borderRadius: '12px' }} />
        </div>
      </div>
    </div>
  );
}

export function LoadingCards({ count = 6 }: { count?: number }) {
  return (
    <div style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
      gap: '12px',
    }}>
      {Array.from({ length: count }).map((_, i) => (
        <div key={i} style={{ animation: `cardAppear 350ms cubic-bezier(0.22,1,0.36,1) ${i * 60}ms both` }}>
          <LoadingCard />
        </div>
      ))}
    </div>
  );
}
