Avatar

<!-- Basic Avatar with Initials -->
<div class="lyd-avatar md">JD</div>

<!-- Avatar with Image -->
<div class="lyd-avatar lg">
    <img src="user.jpg" alt="User Name">
</div>

<!-- Avatar with Status -->
<div class="lyd-avatar lg">
    JD
    <span class="lyd-avatar-status online"></span>
</div>

<!-- Avatar Group -->
<div class="lyd-avatar-group">
    <div class="lyd-avatar md">JD</div>
    <div class="lyd-avatar md">AS</div>
    <div class="lyd-avatar md lyd-avatar-more">+3</div>
</div>

<!-- Avatar with Info -->
<div class="lyd-avatar-item">
    <div class="lyd-avatar md">JD</div>
    <div class="lyd-avatar-info">
        <div class="lyd-avatar-name">John Doe</div>
        <div class="lyd-avatar-role">Agent</div>
    </div>
</div>

// components/Avatar.tsx
import { ReactNode } from 'react';

interface AvatarProps {
  src?: string;
  alt?: string;
  initials?: string;
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
  shape?: 'circle' | 'rounded' | 'square';
  status?: 'online' | 'offline' | 'busy' | 'away';
  className?: string;
}

export const Avatar = ({
  src,
  alt,
  initials,
  size = 'md',
  shape = 'circle',
  status,
  className = ''
}: AvatarProps) => {
  const shapeClass = shape === 'circle' ? '' : shape;
  
  return (
    <div className={`lyd-avatar ${size} ${shapeClass} ${className}`}>
      {src ? (
        <img src={src} alt={alt || 'Avatar'} />
      ) : (
        initials || '?'
      )}
      {status && <span className={`lyd-avatar-status ${status}`} />}
    </div>
  );
};

// Avatar Group Component
interface AvatarGroupProps {
  children: ReactNode;
  max?: number;
}

export const AvatarGroup = ({ children, max = 4 }: AvatarGroupProps) => {
  const avatars = React.Children.toArray(children);
  const visible = avatars.slice(0, max);
  const remaining = avatars.length - max;
  
  return (
    <div className="lyd-avatar-group">
      {visible}
      {remaining > 0 && (
        <div className="lyd-avatar md lyd-avatar-more">
          +{remaining}
        </div>
      )}
    </div>
  );
};