import type { ReactNode } from "react";
import clsx from "clsx";
import Heading from "@theme/Heading";
import styles from "./styles.module.css";

type FeatureItem = {
    title: string;
    Svg: React.ComponentType<React.ComponentProps<"svg">>;
    description: ReactNode;
};

const FeatureList: FeatureItem[] = [
    {
        title: "Install / Update",
        Svg: require("@site/static/img/undraw_docusaurus_mountain.svg").default,
        description: (
            <>
                Installation of LST onto your server, including how to setup
                IIS, Windows Service. Also update process and flow
            </>
        ),
    },
    {
        title: "One Click Print",
        Svg: require("@site/static/img/undraw_docusaurus_tree.svg").default,
        description: (
            <>
                Full process on how the One click print flow and bussiness logic
                works
            </>
        ),
    },
    {
        title: "Logistics",
        Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
        description: (
            <>
                All Logistcs topics sucks as "Fake Edi", LST-Datamart (items
                that are not included in alplamart but utlized in our day to
                day)
            </>
        ),
    },
    {
        title: "TMS intergration",
        Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
        description: <>The TMS intergration, how to setup and how to manage.</>,
    },
    {
        title: "Notification System",
        Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
        description: (
            <>
                These are a set of notifications/alerts that have been defined
                useful, each one will be explaind how it works, and how to
                subscript
            </>
        ),
    },
    {
        title: "Scanner app",
        Svg: require("@site/static/img/undraw_docusaurus_react.svg").default,
        description: (
            <>
                The scanner app will be the same app with more limited features
                in it, dedicated more to the type of scanner your are working
                with to not flood the screen.
            </>
        ),
    },
];

function Feature({ title, Svg, description }: FeatureItem) {
    return (
        <div className={clsx("col col--4")}>
            <div className="text--center">
                <Svg className={styles.featureSvg} role="img" />
            </div>
            <div className="text--center padding-horiz--md">
                <Heading as="h3">{title}</Heading>
                <p>{description}</p>
            </div>
        </div>
    );
}

export default function HomepageFeatures(): ReactNode {
    return (
        <section className={styles.features}>
            <div className="container">
                <div className="row">
                    {FeatureList.map((props, idx) => (
                        <Feature key={idx} {...props} />
                    ))}
                </div>
            </div>
        </section>
    );
}