"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import axiosInstance from "@/lib/axiosInstance";

interface TrustIndicator {
    id: number;
    page_id: number;
    title: string;
    image: string | null;
    sort_order?: number;
    status?: boolean;
}

interface TrustIndicatorsProps {
    pageId: number | string;
}

const TrustIndicators = ({ pageId }: TrustIndicatorsProps) => {
    const [indicators, setIndicators] = useState<TrustIndicator[]>([]);
    const [loading, setLoading] = useState<boolean>(true);

    useEffect(() => {
        const fetchIndicators = async () => {
            try {
                setLoading(true);

                const response = await axiosInstance.get(
                    `/cms/trust-indicators?page_id=${pageId}`
                );

                const result = response.data;

                if (result.success) {
                    setIndicators(result.data || []);
                }
            } catch (error) {
                console.error("Failed to fetch trust indicators:", error);
            } finally {
                setLoading(false);
            }
        };

        fetchIndicators();
    }, [pageId]);

    if (loading || indicators.length === 0) return null;

    return (
        <section className="aboutinnercontainer">
            <div className="container container-xxl">
                <div className="row">
                    <div className="col-12">
                        <div
                            className="section-heading text-center"
                            data-aos="fade-down"
                            data-aos-duration="700"
                        >
                            <h2>
                                <span>Trust Indicators</span>
                            </h2>
                        </div>
                    </div>
                </div>
                <div className="row gx-xl-5">

                    <div
                        className="col-xxl-12 col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12"
                        data-aos="fade-down"
                        data-aos-duration="800"
                    >
                        <div className="aboutinnercontent">
                            {!loading && indicators.length > 0 && (
                                <div className="row gx-2 gx-sm-2 gx-md-3 gx-xl-4">
                                    {indicators.map((item) => (
                                        <div
                                            key={item.id}
                                            className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-3 col-6 about-column mt-2 mt-md-3 mt-lg-2 mt-xxl-4"
                                        >
                                            <div className="aboutclbx">
                                                <div className="aboutclbxicon">
                                                    {item.image ? (
                                                        <Image
                                                            src={item.image}
                                                            alt={item.title}
                                                            width={40}
                                                            height={40}
                                                            style={{ objectFit: "contain" }}
                                                        />
                                                    ) : null}
                                                </div>
                                                <h3>{item.title}</h3>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
};

export default TrustIndicators;