import React from 'react';

type GeneralTopSectionProps = {
    title: string;
    description?: string;
    mainImage: string;
};

export const GeneralTopSection = ({
    title,
    description,
    mainImage
}: GeneralTopSectionProps) => (
    <div className="main-top">
        <div className="b-inner b-main-desc">
            <h1 className="title-h1">{title}</h1>
            <div className="main-top__wrap-text">
                {description && <p className="main-top__text">{description}</p>}
            </div>
            <div className="main-top__wrap-btn">
                <a
                    href="https://apps.apple.com/us/app/bbuddy/id6443601377?platform=iphone"
                    className="main-top__btn main-top__btn--apple"
                    target="_blank"
                >
                    <img className="" src="/images/logo-apple.svg" alt=""/>
                    <span className="line" />
                    AppStore
                </a>
                <a
                    href="https://play.google.com/store/apps/details?id=com.bbuddy.whistle"
                    className="main-top__btn main-top__btn--android"
                    target="_blank"
                >
                    <img className="" src="/images/logo-android.svg" alt=""/>
                    <span className="line" />
                    GooglePlay
                </a>
            </div>
            <div className="main-top__img">
                <img className="" src={`/images/${mainImage}`} alt=""/>
            </div>
        </div>
    </div>
);