import { useState } from 'react';
import styles from './index.module.css';
import TopTabs from './TopTabs';

type Data = {
    tabItems: {
        icon?: string;
        tabName?: string;
        contentTitle?: string;
        contentSubtitle?: string;
        contentText?: string;
        content?: string;
        /** 以 mockData 为准 */
        sideImage?: string;
        path?: string;
    }[]
    backgroundImage?: string;
    titleDirection?: 'row' | 'column';
}

export default function TopTabsSection({ data, className }: { data: Data, className?: string }) {
    const [activeIndex, setActiveIndex] = useState(0);
    return (
        <section className={`${styles.topTabsSection} ${className}`} style={{ backgroundImage: `url(${data.backgroundImage})` }}>
            <TopTabs data={data} activeIndex={activeIndex} setActiveIndex={setActiveIndex} />
            <div className={styles.topTabsContent}>
                <div className={styles.topTabsContentLeft}>
                    <div className={styles.topTabsContentLeftHead}>
                        {
                            data.tabItems[activeIndex].icon && (
                                <img src={data.tabItems[activeIndex].icon} alt="" style={{ width: '100px', height: '100px' }} />
                            )
                        }   
                        <div className={`${styles.topTabsContentLeftTitle} ${data.titleDirection === 'column' ? styles.columnCenter : ''}`}>
                            <div className={styles.topTabsContentLeftTitleMain}>{data.tabItems[activeIndex].contentTitle}</div>
                            <div className={styles.topTabsContentLeftTitleSub}>{data.tabItems[activeIndex].contentSubtitle}</div>
                        </div>
                    </div>
                    <p className={styles.topTabsContentLeftDesc}>
                        {data.tabItems[activeIndex].contentText ?? data.tabItems[activeIndex].content}
                    </p>
                </div>
                <div className={styles.topTabsContentRight}>
                    <img src={data.tabItems[activeIndex].sideImage} alt="side-image" />
                </div>
            </div>
        </section>
    )
}