Avatar Group

import { Avatar, AvatarFallback, AvatarImage, AvatarGroup } from '@otfdashkit/ui'

const TEAM = [
  { initials: 'SC', src: 'https://i.pravatar.cc/64?img=47' },
  { initials: 'AR', src: 'https://i.pravatar.cc/64?img=12' },
  { initials: 'KL', src: 'https://i.pravatar.cc/64?img=22' },
  { initials: 'JD', src: 'https://i.pravatar.cc/64?img=33' },
  { initials: 'MP', src: 'https://i.pravatar.cc/64?img=51' },
  { initials: 'TS', src: 'https://i.pravatar.cc/64?img=58' },
  { initials: 'VR', src: 'https://i.pravatar.cc/64?img=64' },
] as const

export function Example() {
  return (
    <div className="flex flex-col gap-8">
      <div className="space-y-2">
        <p className="text-xs font-mono uppercase tracking-widest text-[hsl(var(--muted-foreground))]">Default · max 4</p>
        <AvatarGroup max={4}>
          {TEAM.map((m) => (
            <Avatar key={m.initials}>
              <AvatarImage src={m.src} alt={m.initials} />
              <AvatarFallback>{m.initials}</AvatarFallback>
            </Avatar>
          ))}
        </AvatarGroup>
      </div>

      <div className="space-y-2">
        <p className="text-xs font-mono uppercase tracking-widest text-[hsl(var(--muted-foreground))]">Compact · 24px / -10px overlap</p>
        <AvatarGroup max={5} size={24} spacing={10}>
          {TEAM.slice(0, 7).map((m) => (
            <Avatar key={m.initials}>
              <AvatarImage src={m.src} alt={m.initials} />
              <AvatarFallback className="text-[8px]">{m.initials}</AvatarFallback>
            </Avatar>
          ))}
        </AvatarGroup>
      </div>

      <div className="space-y-2">
        <p className="text-xs font-mono uppercase tracking-widest text-[hsl(var(--muted-foreground))]">Large · custom overflow</p>
        <AvatarGroup
          max={3}
          size={48}
          renderOverflow={(n) => `+${n}`}
        >
          {TEAM.map((m) => (
            <Avatar key={m.initials}>
              <AvatarImage src={m.src} alt={m.initials} />
              <AvatarFallback>{m.initials}</AvatarFallback>
            </Avatar>
          ))}
        </AvatarGroup>
      </div>

      <div className="space-y-2">
        <p className="text-xs font-mono uppercase tracking-widest text-[hsl(var(--muted-foreground))]">Fallback only · no images</p>
        <AvatarGroup max={5}>
          {TEAM.map((m) => (
            <Avatar key={m.initials}>
              <AvatarFallback>{m.initials}</AvatarFallback>
            </Avatar>
          ))}
        </AvatarGroup>
      </div>
    </div>
  )
}