import type { FC } from 'react';
import React from 'react';
import { SkeletonLoader } from '@theorchard/suite-components';

export const CLASS_NAME = 'ProductModalBodyLoading';
const containerClassName = 'page-container';

const ProductModalBodyLoading: FC = () => {
    return (
        <div className={CLASS_NAME} data-testid="ProductModalBodyLoading">
            <div
                className="ProductModalHeader"
                data-testid="ProductModalHeaderLoading"
            >
                <div className="row mb-2">
                    <SkeletonLoader
                        testId="ImgThumbLoading"
                        vertical
                        numberOfItems={1}
                    />
                </div>

                <div className="row">
                    <div className="col-1 pr-0">
                        <div className="square square w-75 h-100" />
                    </div>

                    <div className="col-11 pl-0">
                        <SkeletonLoader vertical numberOfItems={3} />
                    </div>
                </div>
            </div>

            <div className="PageBody">
                <div className={containerClassName}>
                    <div
                        className="notifications-loading"
                        data-testid="notifications-loading"
                    >
                        <div className="rectangle" />
                        <div className="rectangle" />
                        <div className="rectangle" />
                    </div>

                    <div className="title mt-5">
                        <div className="rectangle" />
                    </div>
                    <div className="fragment-box">
                        <div className="fragment-title">
                            <div className="rectangle" />
                        </div>
                        <div className="content-wrapper">
                            <div className="square" />
                            <div className="content">
                                <div className="rectangle" />
                                <div className="rectangle" />
                                <div className="rectangle" />
                                <div className="rectangle" />
                                <div className="rectangle" />
                            </div>
                        </div>
                    </div>
                    <div className="fragment-box common">
                        <div className="fragment-title">
                            <div className="rectangle" />
                        </div>
                        <div className="rectangle" />
                        <div className="rectangle" />
                        <div className="rectangle" />
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ProductModalBodyLoading;