/**
 * Copyright (c) 2023, WSO2 LLC. (https://www.wso2.com). All Rights Reserved.
 *
 * This software is the property of WSO2 LLC. and its suppliers, if any.
 * Dissemination of any information or reproduction of any material contained
 * herein in any form is strictly forbidden, unless permitted by WSO2 expressly.
 * You may not alter or remove any copyright or other notice from copies of this content.
 */

import { IdentifiableComponentInterface } from "@wso2is/core/models";
import { EmptyPlaceholder, PageLayout } from "@wso2is/react-components";
import React, { FunctionComponent, ReactElement } from "react";
import { useTranslation } from "react-i18next";
import { getEmptyPlaceholderIllustrations } from "../../../../features/core";

/**
 * Prop-types for the API resources page component.
 */
type APIResourcesPageInterface = IdentifiableComponentInterface;

/**
 * API Resources listing page.
 *
 * @param props - Props injected to the component.
 * @returns API Resources Page component
 */
const APIResourcesPage: FunctionComponent<APIResourcesPageInterface> = (
    props: APIResourcesPageInterface
): ReactElement => {

    const {
        ["data-componentid"]: componentId
    } = props;

    const { t } = useTranslation();

    return (
        <PageLayout
            pageTitle="Users"
            title={ t("extensions:develop.apiResource.pageHeader.title") }
            description={ t("extensions:develop.apiResource.pageHeader.description") }
            data-componentid={ `${componentId}-page-layout` }
            data-testid={ `${componentId}-page-layout` }
            headingColumnWidth="11"
            actionColumnWidth="5"
        >
            <EmptyPlaceholder
                subtitle={ [ t("extensions:develop.apiResource.empty") ] }
                image={ getEmptyPlaceholderIllustrations().emptyList }
                imageSize="tiny"
            />
        </PageLayout>
    );

};

/**
 * Default props for the component.
 */
APIResourcesPage.defaultProps = {
    "data-componentid": "api-resources"
};

/**
 * A default export was added to support React.lazy.
 * TODO: Change this to a named export once react starts supporting named exports for code splitting.
 * @see {@link https://reactjs.org/docs/code-splitting.html#reactlazy}
 */
export default APIResourcesPage;
