import { __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import clsx from 'clsx';
import { forwardRef } from 'react';
import { useIsMobile } from '../hooks/use-is-mobile';
import Box from '../Box';
import Container from '../Container';
import Link from '../Link';
import Typography from '../Typography';

/**
 * The Footers display a set of links and a copyright at the bottom of the application.
 *
 * Demos:
 *
 * - [Footer (Oxygen UI)](https://wso2.github.io/oxygen-ui/react/?path=/docs/navigation-footer)
 *
 * @remarks
 * - ✨ This is a custom component that is not available in the Material-UI library.
 * - ✔️ Props of the [Box](https://mui.com/material-ui/api/box/) 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 Footer component.
 * @param ref - The ref to be forwarded to the Box component.
 * @returns The rendered Footer component.
 */
const Footer = forwardRef((_a, ref) => {
    var { className, copyright, component = 'footer', links, maxWidth } = _a, rest = __rest(_a, ["className", "copyright", "component", "links", "maxWidth"]);
    const isMobile = useIsMobile();
    return (_jsx(Box, Object.assign({ ref: ref, component: component, className: clsx(
        /* @deprecated Use the PascalCase classname instead. https://github.com/wso2/oxygen-ui/issues/274 */
        'oxygen-footer', 'OxygenFooter-root', { mobile: isMobile }, className) }, rest, { children: _jsxs(Container, Object.assign({ disableGutters: true, maxWidth: maxWidth, className: "OxygenFooter-container oxygen-footer-container" }, { children: [links !== undefined && Array.isArray(links) && links.length > 0 && (_jsx(Box, Object.assign({ className: "OxygenFooter-links oxygen-footer-links", fontSize: "body2.fontSize" }, { children: links.map((link) => (_jsx(Link, Object.assign({ className: "OxygenFooter-link oxygen-footer-link", underline: "none", target: "_blank", rel: "noopener", color: "textSecondary" }, link), link.id))) }))), copyright && (_jsx(Box, Object.assign({ className: "OxygenFooter-links oxygen-footer-links" }, { children: _jsx(Box, Object.assign({ color: "text.secondary" }, { children: _jsx(Typography, Object.assign({ className: "OxygenFooter-copyright oxygen-footer-copyright", display: "inline", variant: "body2" }, { children: copyright })) })) })))] })) })));
});
export default Footer;
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-footer {\n  padding: 8px 16px;\n  margin-top: auto;\n  border-top: 1px solid var(--oxygen-palette-divider);\n  background: var(--oxygen-palette-customComponents-Footer-background);\n}\n.oxygen-footer .oxygen-footer-container {\n  display: flex;\n  place-content: center space-between;\n  flex-flow: row wrap;\n}\n.oxygen-footer.mobile .oxygen-footer-container {\n  place-content: center;\n}\n.oxygen-footer .oxygen-footer-links {\n  display: flex;\n  place-content: center;\n  flex-flow: row wrap;\n}\n.oxygen-footer .oxygen-footer-links .oxygen-footer-link {\n  margin-right: 8px;\n}\n.oxygen-footer .oxygen-footer-links .oxygen-footer-link:not(:first-child) {\n  margin-left: 8px;\n}");