/**
 * Copyright (c) 2025-present, Goldman Sachs
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import { Typography } from '@mui/material';
import { observer } from 'mobx-react-lite';

export type FeaturedElementsItems = {
  icon: React.ReactElement;
  title: string;
};

export const ComingSoonDisplay = observer(
  (props: {
    loadingIcon: React.ReactElement;
    title: string;
    description: string;
    featuresPreviewItems: FeaturedElementsItems[];
  }) => {
    const { loadingIcon, title, description, featuresPreviewItems } = props;

    const featuresPreview = (
      <div className="features-preview">
        {featuresPreviewItems.map((item) => {
          return (
            <div key={item.title} className="features-preview__item">
              {item.icon}
              <div className="features-preview__item__text">{item.title}</div>
            </div>
          );
        })}
      </div>
    );

    return (
      <div className="coming-soon-display">
        <div className="coming-soon-display__content">
          <div className="coming-soon-display__icon">{loadingIcon}</div>

          <Typography variant="h1" className="coming-soon-display__title">
            {title}
          </Typography>

          <Typography variant="h2" className="coming-soon-display__subtitle">
            Coming Soon
          </Typography>

          <Typography
            variant="body1"
            className="coming-soon-display__description"
          >
            {description}
          </Typography>

          {featuresPreview}
        </div>
      </div>
    );
  },
);