---
import CardFeature from "@/components/Cards/CardFeature.astro";
import Heading from "@/components/Heading.astro";
type Feature = {
    title: string;
    iconName: string;
    description: string;
};

const features: Array<Feature> = [
    {
        title: "Fast",
        iconName: "Fast",
        description:
            "Thanks to rust with multithreading and skia we're really fast!",
    },
    {
        title: "Extensible",
        iconName: "Extensible",
        description:
            "Modular structured and thanks to our dual language approach you even decide in which language you want to extend!",
    },
    {
        title: "Community driven & Free",
        iconName: "Open",
        description:
            "The project is MIT licensed and we're open to new ideas for further development. Also since this product is not profit driven we won't screw you over!",
    },
];
---

<div>
    <div class="p-main py-0">
        <Heading>Core Features & Values</Heading>
    </div>
    <div
        id="features-cards-container"
        class="flex flex-row flex-nowrap overflow-x-auto snap-x snap-mandatory gap-card overflow-y-clip p-main snap-center"
    >
        {
            features.map((feature) => (
                <CardFeature
                    iconName={feature.iconName}
                    title={feature.title}
                    description={feature.description}
                />
            ))
        }
    </div>
</div>

<script>
    import { animate, inView, stagger } from "motion";
    import { ease } from "@unom/style";

    const cardsContainer = document.getElementById("features-cards-container");

    const cards = document.querySelectorAll("#features-cards-container .card");

    if (cardsContainer) {
        inView(cardsContainer, () => {
            animate(
                cards,
                {
                    scale: [0.8, 1],
                    opacity: [0, 1],
                },
                { ...ease.quint(0.8).out, delay: stagger(0.1) }
            );
        });
    }

    console.log(cardsContainer);
</script>