"use client";
import { motion } from "motion/react";
import categories from "@core/Models/Categories.type";
import { useNavigation } from "@core/app/hooks/goto";

import style from "./style.module.css";
import { useHeaderStore } from "@core/Store/Header.Store";

export default function CategoriesExplorer() {
    const headerState = useHeaderStore();
    const { goTo } = useNavigation();
    return (
        <>
            <div className={style.categoriesExplorer}>
                <ul>
                    {categories.map((category) => (
                        <motion.li
                            key={category.id}
                            whileHover={{ scale: 1.1, backgroundColor: "#fff480" }}
                            whileTap={{ scale: 0.95 }}
                            onClick={() => {
                                headerState.setPublicFindCategoryId(category.id);
                                goTo("/landing/find");
                            }}
                            style={{
                                backgroundPosition: "left top",
                                backgroundRepeat: "no-repeat",
                            }}
                        >
                            <h3>{category.name}</h3>
                            <p>{category.description}</p>
                        </motion.li>
                    ))}
                </ul>
            </div>
        </>
    );
}
