'use client';
import React, {useState} from "react";
import {Languages} from "../../types/tags";
import {BlogPostCategory} from "../../types/blogPostCategory";
import Link from "next/link";

type Props = {
    languages?: Languages;
    basePath: string;
    locale: string;
    cats: BlogPostCategory[],
    slug: string
};

export const BlogPostCategories = ({ basePath = '/',  cats = [], slug = '' }: Props) => {
    const [currentCat, setCurrentCat] = useState<String>(slug);
    return (
        <div className="b-news__filter ">
            <div className="b-inner">
                <div className="wrap-filter">
                    {
                        cats.map((cat, i)=>(
                            <Link
                                href={ basePath+'category/'+cat.slug} key={'blogCat'+i}
                                className={"filter-item"+(cat.slug === currentCat ? ' active' : '')}
                            >
                                {cat.title}
                            </Link>
                        ))
                    }
                </div>
            </div>
        </div>
    )
}
