import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
import qs from "qs";

export const fetchFooter = createAsyncThunk(
    "FooterSlice/fetchFooter",
    async () => {
        const query = {
            populate: [
                "logo",
                "SocialMedia.icon",
                "QuickLink",
                "Product",
                "Locations",
                "Inquiries",
            ],
        };
        const queryString = qs.stringify(query, {
            encodeValuesOnly: true,
        });
        const endpoint = `${process.env.NEXT_PUBLIC_BACKEND_API_URL}/api/footer?${queryString}`;
        const response = await axios.get(endpoint);
        console.log(endpoint, 'response44');
        return response.data.data;
    }
);

const FooterSlice = createSlice({
    name: "Footer",
    initialState: {
        status: "idle",
        data: [],
        error: null,
    },
    reducers: {},
    extraReducers: (builder) => {
        builder
            .addCase(fetchFooter.pending, (state) => {
                state.status = "loading";
            })
            .addCase(fetchFooter.fulfilled, (state, action) => {
                state.status = "succeeded";
                state.data = action.payload;
            })
            .addCase(fetchFooter.rejected, (state, action) => {
                state.status = "failed";
                state.error = action.error.message;
            });
    },
});
export default FooterSlice.reducer;