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

import type { JSXElement } from "@coreai-ds/react-components";
import { List } from "@coreai-ds/react-components";
import { ListItem } from "@coreai-ds/react-components";
import { Persona } from "@coreai-ds/react-components";
import * as React from 'react';

type Item = {
    name: string;
    id: string;
    avatar: string;
};

const items: Item[] = [
    'Melda Bevel',
    'Demetra Manwaring',
    'Eusebia Stufflebeam',
    'Israel Rabin',
    'Bart Merrill',
    'Sonya Farner',
].map(name => ({
    name,
    id: name,
    avatar: 'https://res-1.cdn.office.net/files/fabric-cdn-prod_20230815.002/office-ui-fabric-react-assets/persona-male.png',
}));

export const SingleActionSelection = (): JSXElement => {
    const defaultSelectedItems = ['Demetra Manwaring', 'Bart Merrill'];
    return (<List selectionMode="multiselect" defaultSelectedItems={defaultSelectedItems} aria-label="People example">
      {items.map(({ name, avatar }, i) => (<ListItem key={name} value={name} aria-label={name} checkmark={{ 'aria-label': name }} disabledSelection={i > 3} // Example of disabling selection for last 2 items
        >
          <Persona name={name} secondaryText="Available" presence={{ status: 'available' }} avatar={{
                image: {
                    src: avatar,
                },
            }}/>
        </ListItem>))}
    </List>);
};

export default SingleActionSelection;