'use client';
import clsx from 'clsx';
import { useEffect, useRef, useState, } from 'react';
import { Each } from '../../00-base';
import { Paragraph } from '../../01-atoms';
import { AvatarItem } from './AvatarItem';
/**
 * Avatar component for displaying a user's avatar with an optional dropdown list.
 *
 * @component
 * @example
 * // Example usage of Avatar component
 * <Avatar
 *   name="John Doe"
 *   list={[{ name: 'Profile', onClick: () => console.log('Profile clicked') }]}
 *   position="right"
 *   className="custom-class"
 * />
 *
 * @param {Object} props - The properties of the Avatar component.
 * @param {string} props.name - The name of the user to be displayed.
 * @param {TAvatarList[]} [props.list] - Optional list of items to be displayed in the dropdown.
 * @param {'left' | 'right'} [props.position] - Optional position of the dropdown list.
 * @param {string} [props.className] - Optional additional class names for the button element.
 *
 * @returns {ReactNode} The rendered Avatar component.
 */
export function Avatar({ name, list, position, ...restProps }) {
    const [openList, setOpenList] = useState(false);
    const ref = useRef(null);
    const capitalLetters = () => {
        const words = name.split(' ');
        return `${words?.[0]?.[0]?.toUpperCase()}${words?.[1]?.[0]?.toUpperCase() ?? ''}`;
    };
    const handleOpen = () => {
        if (list) {
            setOpenList(!openList);
        }
    };
    const handleClick = (event, onClick) => {
        onClick && onClick(event);
        setOpenList(false);
    };
    const handleClickOutside = (event) => {
        if (ref.current && !ref.current.contains(event.target)) {
            setOpenList(false);
        }
    };
    useEffect(() => {
        document.addEventListener('mousedown', handleClickOutside);
        return () => {
            document.removeEventListener('mousedown', handleClickOutside);
        };
    }, []);
    return (<div className="relative" ref={ref}>
      <button {...restProps} className={clsx('bg-gray-6 flex w-max flex-row items-center rounded-full p-2', !list && 'cursor-default', restProps.className)} onClick={handleOpen}>
        <Paragraph size="subtitle-1" className="bg-clicoh text-gray-6 mr-2 min-w-7 rounded-full p-1">
          {capitalLetters()}
        </Paragraph>
        <Paragraph className="p-1 pl-0 capitalize" size="body-1">
          {name}
        </Paragraph>
      </button>
      {!!list && !!openList && (<div className={clsx('divide-gray-5 absolute top-12 z-10 w-max max-w-52 divide-y overflow-hidden rounded-lg bg-white shadow-md', position === 'right' && 'right-0')}>
          <Each of={list} render={({ onClick, ...restProps }) => (<AvatarItem key={restProps.text} {...restProps} onClick={(event) => handleClick(event, onClick)}/>)}/>
        </div>)}
    </div>);
}
//# sourceMappingURL=Avatar.jsx.map