import Banner, { type BannerConfig } from "@/components/Banner";
import Section from "@/components/layout/Section";
import styles from "./SiteMap.module.css";
import { Link } from "react-router-dom";
import { useStore } from "@/store";

export default function SiteMap() {
    const appConfig = useStore((s) => s.appConfig);
    const data = appConfig?.others?.siteMap;

    if (!data) return null;

    const banner = data.banner;
    const section1Data = data.section1Data;
    const items = section1Data?.items ?? [];
    const title = section1Data?.title ?? "网站地图";

    return (
        <div>
            <Banner
                title={banner?.title ?? ""}
                content={(banner as BannerConfig)?.content}
                titleSize={(banner as BannerConfig)?.titleSize ?? "large"}
                showBreadcrumb={banner?.showBreadcrumb ?? false}
                backgroundImage={banner?.backgroundImage ?? "/images/bg-overview.png"}
            />

            <Section background="" maskBackground="#fff">
                <div className={styles.siteMap}>
                    <div className={styles.siteMapTitle}>{title}</div>

                    <div className={styles.siteMapItems}>
                        {items.map((item) => (
                            <div className={styles.siteMapItem} key={item.label}>
                                <div className={styles.siteMapItemLabel}>{item.label}</div>
                                <div className={styles.siteMapItemChildren}>
                                    {item.children?.map((child: { path: string; label: string; children?: { path: string; label: string }[] }) => (
                                        <div
                                            className={styles.siteMapItemChild}
                                            key={child.label}
                                        >
                                            <Link
                                                to={child.path}
                                                className={styles.siteMapItemChildLabel}
                                            >
                                                {child.label}
                                            </Link>
                                            <div className={styles.siteMapItemChildChildren}>
                                                {child.children?.map((childChild) => (
                                                    <Link
                                                        to={childChild.path}
                                                        className={styles.siteMapItemChildChild}
                                                        key={childChild.label}
                                                    >
                                                        {childChild.label}
                                                    </Link>
                                                ))}
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </Section>
        </div>
    );
}