"use client"

import axios from 'axios';
import React, { useState, useEffect } from 'react';
import PostList from '@/components/ui/list/PostList';
import { Post, PostsResponse } from '@/utils/types';

const Categories = () => {
    const [selectedCategory, setSelectedCategory] = useState<string>('nextjs');
    const [posts, setPosts] = useState<Post[]>([]);
    console.log("first", selectedCategory)
    console.log("posts", posts)


    const fetchPosts = async () => {
        try {
            const response = await axios.get<PostsResponse>(
                selectedCategory
                    ? `http://localhost:3000/api/posts?cat=${selectedCategory}`
                    : 'http://localhost:3000/api/posts'
            );
            console.log("res", response)
            setPosts(response.data.posts);
        } catch (error) {
            console.error('Error fetching posts:', error);
        }
    };
    useEffect(() => {

        fetchPosts();
    }, [selectedCategory])


    const categories: string[] = [
        "nextjs",
        "react",
        "redux",
        "typescript",
        "javascript"
    ];

    const handleCategoryClick = (category: string) => {
        setSelectedCategory(category);
    };

    return (
        <div className='flex flex-col justify-center gap-10 mt-10 mx-auto '>
            <h2 className='text-3xl font-bold tracking-wider'>Categories</h2>
            <div className='flex flex-col md:flex-row gap-4 w-full'>
                {categories.map((text, index) => (
                    <button
                        key={index}
                        className={`flex overflow-hidden justify-center items-center gap-4 border-2 text-xl font-medium shadow-xl bg-card py-3 px-6 rounded-lg cursor-pointer hover:shadow-sm hover:scale-105 transition-shadow duration-300 capitalize
              ${selectedCategory === text ? 'text-purple-500 boder-2 border-purple-500' : ''}`}
                        onClick={() => handleCategoryClick(text)}
                    >
                        {text}
                    </button>
                ))}
            </div>
            <div className='grid grid-cols-12 gap-4'>
                {posts.map((post: Post) => (
                    <PostList key={post.id} post={post} />
                ))}
            </div>
        </div>
    );
};

export default Categories;