import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { forwardRef } from 'react';
import Box from '../Box';
import Card from '../Card';
import CardHeader from '../CardHeader';
import Carousel from '../Carousel';
import CircularProgressAvatar from '../CircularProgressAvatar';
import Divider from '../Divider';

/**
 * The Account Overview component lets you display the progress of the user's account.
 * It includes the user's profile picture, name, email, account progress and account completion steps.
 *
 * Demos:
 *
 * - [Account Overview (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/patterns-account-overview)
 *
 * API:
 *
 * - inherits [Card API](https://mui.com/material-ui/api/card/)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the [Paper](https://mui.com/material-ui/api/card/) component are also available.
 * - ✅ `component` prop is supported.
 * - ✅ The `ref` is forwarded to the root element.
 *
 * @template C - The type of the component.
 * @param props - The props for the AccountOverview component.
 * @param ref - The ref to be forwarded to the Card component.
 * @returns The rendered AccountOverview component.
 */
const AccountOverview = forwardRef((_a, ref) => {
    var { className, title, subheader, accountCompletionStepsTitle, accountCompletionSteps, accountProgress, user, cardHeaderProps } = _a, rest = __rest(_a, ["className", "title", "subheader", "accountCompletionStepsTitle", "accountCompletionSteps", "accountProgress", "user", "cardHeaderProps"]);
    return (_jsxs(Card, Object.assign({ ref: ref, className: clsx(
        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
        'oxygen-account-overview', 'OxygenAccountOverview-root', className), elevation: 0, variant: "outlined" }, rest, { children: [_jsx(CardHeader, Object.assign({ avatar: _jsx(CircularProgressAvatar, { color: accountProgress < 100 ? 'warning' : 'success', progress: accountProgress, avatarOptions: { alt: "User's avatar", src: user === null || user === void 0 ? void 0 : user.image }, badgeOptions: { badgeContent: `${accountProgress}%`, color: accountProgress < 100 ? 'warning' : 'success' } }), title: title, subheader: subheader }, cardHeaderProps)), accountCompletionSteps && (_jsxs(Box, Object.assign({ className: clsx(
                /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
                'oxygen-account-completion-steps-box', 'OxygenAccountOverview-completionStepsBox') }, { children: [_jsx(Divider, {}), _jsx(Carousel, { title: accountCompletionStepsTitle, steps: accountCompletionSteps })] })))] })));
});
export default AccountOverview;
function addCSS(css){var head = document.getElementsByTagName('head')[0];var s = document.createElement('style');s.setAttribute('type', 'text/css');s.appendChild(document.createTextNode(css));head.appendChild(s);}
addCSS("/**\n * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n.oxygen-account-overview {\n  padding: 0.8rem 1rem;\n}\n.oxygen-account-overview .oxygen-card-header {\n  padding: 1rem 0;\n  padding-bottom: 1.5rem;\n}\n.oxygen-account-overview .oxygen-account-completion-steps-box {\n  padding: 0.5rem;\n}");