// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { AvatarGroupProps } from "@coreai-ds/react-components";
import type { JSXElement } from "@coreai-ds/react-components";
import { partitionAvatarGroupItems } from "@coreai-ds/react-components";
import { AvatarGroup } from "@coreai-ds/react-components";
import { AvatarGroupItem } from "@coreai-ds/react-components";
import { AvatarGroupPopover } from "@coreai-ds/react-components";
import * as React from 'react';

// Inline wrapper so RCM resolves AvatarGroup (+ subcomponent) props and this
// meta owns `Default` (the fork-id dedup in main.ts drops the vendored duplicate).
const names = [
    'Johnie McConnell',
    'Allan Munger',
    'Erik Nason',
    'Kristin Patterson',
    'Daisy Phillips',
    'Carole Poland',
    'Carlos Slattery',
    'Robert Tolbert',
    'Kevin Sturgis',
    'Charlotte Waltson',
    'Elliot Woodward',
];

export const Default = (props: Partial<AvatarGroupProps>): JSXElement => {
    const { inlineItems, overflowItems } = partitionAvatarGroupItems({ items: names });
    return (<AvatarGroup {...props}>
      {inlineItems.map((name) => (<AvatarGroupItem name={name} key={name}/>))}
      {overflowItems && (<AvatarGroupPopover>
          {overflowItems.map((name) => (<AvatarGroupItem name={name} key={name}/>))}
        </AvatarGroupPopover>)}
    </AvatarGroup>);
};

export default Default;