import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Avatar from '../../design-system/Avatar';
import CardContainer from '../../design-system/CardContainer';
import Pills from '../../design-system/Pills';
import Switcher from '../../design-system/Switcher';
import Title from '../../design-system/Title';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import { composeSx } from '../../../utils/components';
const AvatarSwitcherCard = ({ checked = false, disabled = false, sx, title, description, icon, onChange, pills, actions, slotProps = {}, }) => {
    const { root: rootProps, avatar: avatarProps, title: titleProps, switcher: switcherProps, } = slotProps;
    const { sx: switcherSx, disabled: switcherDisabled, ...restSwitcherProps } = switcherProps ?? {};
    return (_jsx(CardContainer, { sx: {
            width: '100%',
            ...sx,
        }, ...rootProps, children: _jsxs(Stack, { sx: {
                flexDirection: 'row',
                justifyContent: 'space-between',
                alignItems: 'center',
                gap: 1,
            }, children: [_jsxs(Stack, { sx: {
                        flex: 1,
                        gap: 1,
                        alignItems: 'center',
                        flexDirection: 'row',
                        minWidth: 0,
                    }, children: [_jsx(Avatar, { Icon: icon, ...avatarProps, disabled: disabled || avatarProps?.disabled }), _jsx(Title, { title: title, description: description, variant: "S", sx: {
                                textWrap: 'balance',
                            }, ...titleProps })] }), _jsxs(Stack, { sx: {
                        alignItems: 'center',
                        flexDirection: 'row',
                        flexShrink: 0,
                        gap: 1,
                    }, children: [pills?.map((pill, index) => (_jsx(Pills, { hasIcon: false, ...pill, size: "small" }, `${pill.label}-${index}`))), actions?.map((action, index) => (_jsx(IconButton, { ...action, disabled: disabled || action.disabled }, ('id' in action ? action.id : undefined) ??
                            action['aria-label'] ??
                            index))), _jsx(Switcher, { value: checked, onChange: onChange, ...restSwitcherProps, sx: composeSx({ alignSelf: 'center', width: 'auto' }, switcherSx), disabled: disabled || switcherDisabled })] })] }) }));
};
export default AvatarSwitcherCard;
