import { useEffect } from "react";
import { SecondaryButton } from "../../../components/button/SecondaryButton";
import { useAppDispatch } from "../../../redux/hooks";
import ArticleItem from "./ArticleItem";
import { setMenuActivePage } from "../../../redux/slices/store";


export interface Article {
    id: number;
    name: string;
    tags: string[];
}


const Articles = () => {

    const dispatch = useAppDispatch();

    const articles: Article[] = [
        {
            "id": 1,
            "name": "Todo List App",
            "tags": ["Sertificated", "state", "list"],
        },
        {
            "id": 2,
            "name": "Search Filter Component",
            "tags": ["filter", "props", "hooks"],
        },
        {
            "id": 3,
            "name": "User Card List",
            "tags": ["components", "props", "array"],
        },
        {
            "id": 4,
            "name": "Theme Switcher",
            "tags": ["Sertificated", "theme", "hooks"],
        },
        {
            "id": 2,
            "name": "Search Filter Component",
            "tags": ["filter", "props", "hooks"],
        },
        {
            "id": 3,
            "name": "User Card List",
            "tags": ["components", "props", "array"],
        },
        {
            "id": 4,
            "name": "Theme Switcher",
            "tags": ["Sertificated", "theme", "hooks"],
        },
        {
            "id": 2,
            "name": "Search Filter Component",
            "tags": ["filter", "props", "hooks"],
        },
        {
            "id": 3,
            "name": "User Card List",
            "tags": ["components", "props", "array"],
        },
        {
            "id": 4,
            "name": "Theme Switcher",
            "tags": ["Sertificated", "theme", "hooks"],
        },
        {
            "id": 2,
            "name": "Search Filter Component",
            "tags": ["filter", "props", "hooks"],
        },
        {
            "id": 3,
            "name": "User Card List",
            "tags": ["components", "props", "array"],
        },
        {
            "id": 4,
            "name": "Theme Switcher",
            "tags": ["Sertificated", "theme", "hooks"],
        },
        {
            "id": 2,
            "name": "Search Filter Component",
            "tags": ["filter", "props", "hooks"],
        },
        {
            "id": 3,
            "name": "User Card List",
            "tags": ["components", "props", "array"],
        },
        {
            "id": 4,
            "name": "Theme Switcher",
            "tags": ["Sertificated", "theme", "hooks"],
        },
        {
            "id": 2,
            "name": "Search Filter Component",
            "tags": ["filter", "props", "hooks"],
        },
        {
            "id": 3,
            "name": "User Card List",
            "tags": ["components", "props", "array"],
        },
        {
            "id": 4,
            "name": "Theme Switcher",
            "tags": ["Sertificated", "theme", "hooks"],
        },
        {
            "id": 2,
            "name": "Search Filter Component",
            "tags": ["filter", "props", "hooks"],
        },
        {
            "id": 3,
            "name": "User Card List",
            "tags": ["components", "props", "array"],
        },
        {
            "id": 4,
            "name": "Theme Switcher",
            "tags": ["Sertificated", "theme", "hooks"],
        }
    ];

      useEffect(() => {
        dispatch(setMenuActivePage("articles"))
      }, []);

    return (
        <div className=" h-full w-full box-border p-[20px] pt-[20px]">
            <div className="h-full box-border">

                <div className="relative flex items-center mb-[20px]">
                    <div className="h-[50px] text-[40px] font-bold text-liquid-white flex items-center">
                        Статьи
                    </div>
                    <SecondaryButton
                        onClick={() => { }}
                        text="Создать статью"
                        className="absolute right-0"
                    />
                </div>

                <div className="bg-liquid-lighter h-[50px] mb-[20px]">

                </div>

                <div>

                    {articles.map((v, i) => (
                        <ArticleItem key={i} {...v} />
                    ))}
                </div>


                <div>
                    pages
                </div>
            </div>
        </div>
    );
};

export default Articles;