"use client";

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

interface OnlineClassItem {
  id: string;
  title: string;
  image: string | null;
  sort_order: number | null;
  status: boolean | null;
}

const Expert = () => {
  const [items, setItems] = useState<OnlineClassItem[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchOnlineClasses = async () => {
      try {
        const response = await axiosInstance.get("/cms/online-classes?page_id=1");
        const result = await response.data;

        if (result.success) {
          setItems(result.data || []);
        }
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };

    fetchOnlineClasses();
  }, []);

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

  return (
    <section className="expertcontainer pt-0">
      <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>Expert Online Classes You Can Join from Home.</span>
              </h2>
            </div>
          </div>
        </div>

        <div className="row gx-2 gx-sm-3 gx-xl-4">
          {items.map((item, index) => (
            <div
              key={item.id}
              className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 expert-column mb-2 mb-sm-3 mb-lg-0"
              data-aos="fade-up"
              data-aos-duration={800 + index * 100}
            >
              <div className="expertclbx">
                <div className="expertclbxicon">
                  {item.image ? (
                    <img
                      src={item.image}
                      alt={item.title}
                    />
                  ) : (
                    <>&nbsp;</>
                  )}
                </div>
                <h3>{item.title}</h3>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Expert;

// "use client";

// const Expert = () => {
//   return (
//     <section className="expertcontainer pt-0">
//       <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>Expert Online Classes You Can Join from Home.</span>
//               </h2>
//             </div>
//           </div>
//         </div>

//         <div className="row gx-2 gx-sm-3 gx-xl-4">
//           <div
//             className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 expert-column mb-2 mb-sm-3 mb-lg-0"
//             data-aos="fade-up"
//             data-aos-duration="800"
//           >
//             <div className="expertclbx">
//               <div className="expertclbxicon">&nbsp;</div>
//               <h3>Posture Correction</h3>
//             </div>
//           </div>

//           <div
//             className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 expert-column mb-2 mb-sm-3 mb-lg-0"
//             data-aos="fade-up"
//             data-aos-duration="900"
//           >
//             <div className="expertclbx">
//               <div className="expertclbxicon">
//                 <svg viewBox="0 0 101 80" fill="none" xmlns="http://www.w3.org/2000/svg">
//                   <path d="M2.27239 80H98.7172C99.9724 80 100.99 78.9663 100.99 77.6908V75.6123C100.991 75.5776 101 75.5454 101 75.5102C101 75.1333 100.911 74.7775 100.753 74.4634L90.8912 49.2356V2.3092C90.8912 1.03374 89.8739 0 88.6188 0H12.3713C11.1162 0 10.0989 1.03374 10.0989 2.3092V49.2356L0.16023 74.6579C0.115721 74.7715 0.0845656 74.8876 0.0583552 75.0047C0.0519262 75.0343 0.0469809 75.064 0.041541 75.0941C0.0168142 75.2288 0.00148361 75.365 0.000989071 75.5012C0.000989071 75.5042 0 75.5072 0 75.5102V77.6908C0 78.9663 1.01726 80 2.27239 80ZM40.7215 72.5477L42.8006 66.0146H58.189L60.2681 72.5477H40.7215ZM16.7796 5.89136H84.2105V46.0951H16.7796V5.89136Z" fill="currentColor" />
//                 </svg>
//               </div>
//               <h3>Structured Learning</h3>
//             </div>
//           </div>

//           <div
//             className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 expert-column mb-2 mb-sm-3 mb-lg-0"
//             data-aos="fade-up"
//             data-aos-duration="1000"
//           >
//             <div className="expertclbx">
//               <div className="expertclbxicon">
//                 <svg viewBox="0 0 53 90" fill="none" xmlns="http://www.w3.org/2000/svg">
//                   <path d="M47.0456 9.8652C42.1589 3.68912 34.4856 0 26.5001 0C18.5146 0 10.8413 3.68912 5.95463 9.8652C0.443502 16.8304 -0.542668 25.2246 2.35393 33.4273C5.13876 41.3135 11.0524 47.8886 15.8876 54.6657C18.1828 57.8839 22.1046 63.3797 24.4832 66.7157C25.4678 68.0954 27.5324 68.0954 28.5168 66.7157C30.8954 63.3799 34.8172 57.8839 37.1124 54.6657C41.9476 47.8884 47.8614 41.3133 50.6461 33.4273C53.5428 25.2246 52.5567 16.8305 47.0456 9.8652ZM26.5001 39.5963C18.2911 39.5963 11.6128 32.979 11.6128 24.8451C11.6128 16.7112 18.2911 10.092 26.5001 10.092C34.7091 10.092 41.3874 16.711 41.3874 24.8451C41.3874 32.9792 34.7091 39.5963 26.5001 39.5963Z" fill="currentColor" />
//                   <path d="M53 72.4419C53 73.347 52.5317 74.1872 51.7602 74.6705L27.9209 89.5922C27.4864 89.8646 26.9933 90 26.5001 90C26.0069 90 25.5139 89.8646 25.0793 89.5922L1.23985 74.6705C0.468337 74.1871 0 73.347 0 72.4419C0 71.5368 0.468337 70.6966 1.23985 70.2134L14.5272 61.8966L20.1376 69.76C21.5957 71.8022 23.9743 73.0238 26.5001 73.0238C29.0259 73.0238 31.4045 71.8022 32.8626 69.76L38.4713 61.8966L51.7603 70.2134C52.5318 70.6966 53 71.5366 53 72.4419Z" fill="currentColor" />
//                 </svg>
//               </div>
//               <h3>No Travel Needed</h3>
//             </div>
//           </div>

//           <div
//             className="col-xxl-3 col-xl-3 col-lg-3 col-md-6 col-sm-6 col-6 expert-column mb-2 mb-sm-3 mb-lg-0"
//             data-aos="fade-up"
//             data-aos-duration="1100"
//           >
//             <div className="expertclbx">
//               <div className="expertclbxicon">
//                 <svg viewBox="0 0 90 90" fill="none" xmlns="http://www.w3.org/2000/svg">
//                   <path d="M47.6547 89.9071C97.0138 87.0841 106.19 17.8105 59.3553 2.2546C46.3954 -2.06772 31.5357 -0.101729 20.1977 7.5201H20.2009C14.9463 11.0017 10.4824 15.5424 7.09724 20.8491C3.71204 26.1559 1.48071 32.1109 0.547192 38.3299L0.544356 38.328C-3.89772 66.0889 19.4769 91.7429 47.6547 89.9071ZM84.1861 61.3957C82.5748 65.1972 80.4092 68.7409 77.7593 71.9122C77.5723 70.8007 78.0885 69.5133 77.3194 68.476C76.485 66.8547 75.7121 65.2008 74.8426 63.5989C74.5193 63.0031 74.6084 62.6608 75.0848 62.232C80.1878 57.7699 75.6387 60.1424 76.1399 53.765C76.158 53.5927 76.1237 53.4189 76.0416 53.2662C75.9594 53.1134 75.8331 52.9888 75.6791 52.9084C73.2602 51.3693 70.1024 50.8407 67.6026 52.5511C64.4872 54.0185 60.0433 52.896 59.0355 49.3325C58.1442 46.9638 58.2536 44.5718 58.2302 42.1527C58.3739 40.8482 60.1697 40.6292 59.8785 39.1214C59.9476 37.2068 59.3214 35.1857 61.1383 33.9361C61.2775 33.8136 61.4434 33.7252 61.6228 33.6778C61.8023 33.6304 61.9904 33.6254 62.1721 33.6632C63.8322 33.8633 65.5099 33.4734 66.91 32.5621C68.3947 31.6241 70.2279 32.2313 71.8726 32.0177C72.6565 31.9621 73.2373 32.1915 73.7199 32.7997C74.6689 33.9936 76.1532 34.3442 77.4002 35.0694C77.8198 35.3134 78.045 35.0059 78.2418 34.7529C79.2894 33.406 80.895 32.9535 82.3028 32.179C83.0695 31.7412 84.6069 33.4127 85.9156 33.4721C88.5236 42.5692 87.9183 52.6963 84.1861 61.3957ZM83.573 27.2051C82.0102 27.41 83.0612 25.9304 82.2546 25.1563C81.4446 24.436 80.6741 23.6727 79.9466 22.8697C79.57 22.4688 79.3263 22.4043 78.8908 22.8326C77.721 23.986 77.7868 23.8636 79.1508 25.2418C80.7435 26.9865 81.9439 26.9573 79.0622 28.1697C78.4064 28.4639 77.7872 29.1344 77.0715 28.1656C76.6383 27.5794 76.0486 27.1855 76.1187 26.2824C76.2262 24.8899 75.1602 23.8804 74.6669 22.6781C74.5196 22.3194 74.2593 22.5721 74.1205 22.7487C73.0828 24.0784 71.5151 24.5923 70.0951 25.331C67.6423 27.4681 68.2022 27.2353 64.9474 27.1424C64.6461 27.1553 64.5575 26.7932 64.4267 26.5816C62.7878 23.9079 63.1056 23.2562 64.8035 20.732C65.4281 20.3587 68.1877 20.7896 68.7093 21.3326C68.9438 21.5763 69.1363 21.8603 69.4746 22.2853C69.7346 21.2503 69.6029 20.4572 69.6299 19.676C70.0698 16.4705 72.7726 17.9151 74.6914 17.2188C75.5983 16.5281 75.9705 16.1842 75.7782 15.8452C78.9858 19.1788 81.6195 23.017 83.573 27.2051ZM75.5157 15.5769C74.2061 14.7272 71.2966 13.8314 71.2191 11.7317C72.7383 12.9136 74.1738 14.1984 75.5157 15.5769ZM15.2826 15.1707C17.724 12.7343 20.4555 10.6048 23.4162 8.82993C24.4231 9.34214 25.1414 11.2265 26.4044 10.557C27.7514 9.85258 29.187 9.29392 30.154 8.03442C30.7018 7.3712 31.6605 7.87882 32.376 7.67764C35.1891 7.29808 35.9496 10.49 37.0019 12.3889C36.909 12.4668 36.8601 12.5415 36.8197 12.5369C34.3788 12.2624 32.1406 13.0435 29.9286 13.8923C29.2019 14.1712 28.6418 14.1949 28.1872 13.4976C27.6254 12.6353 26.9035 12.6104 26.0072 12.9823C25.177 13.5671 22.1943 13.6682 22.4004 14.8418C22.6028 15.9445 21.7292 17.8239 23.7154 17.4483C24.646 17.1256 25.4461 19.8662 26.0148 18.2906C27.2353 13.3628 32.3804 17.663 36.3477 14.5144C37.8072 13.6514 39.0077 16.494 39.5748 17.4952C40.0059 18.4347 40.3176 19.5407 41.8332 19.2131C40.8828 20.1605 39.9259 21.1015 38.9862 22.0592C38.7136 22.337 38.4659 22.248 38.1598 22.142C36.9783 21.7333 35.7807 21.37 34.6033 20.9498C34.0417 20.7494 33.7723 20.7298 33.785 21.4797C34.7464 26.6371 30.3376 21.663 27.2759 25.5307C23.4553 29.3571 26.412 32.5681 21.1612 36.5907C20.8473 36.8779 20.5866 36.9125 20.2763 36.6854C17.9952 35.0717 12.8703 34.195 11.1663 36.8327C11.1419 36.9121 11.1359 36.9961 11.1489 37.0782C11.1618 37.1603 11.1934 37.2384 11.2411 37.3066C12.1537 38.7642 12.2253 41.2166 13.958 38.7715C14.4737 38.3334 15.0795 38.4809 15.6077 38.5684C16.1633 38.6604 15.8874 39.2468 15.8735 39.5878C15.952 40.9478 17.9151 41.1901 17.5289 42.7211C17.3086 43.8287 18.7086 43.2165 19.3238 43.4024C20.3183 43.5452 21.0728 43.2137 21.7103 42.4398C22.1938 41.8528 24.9691 41.454 25.6082 41.8316C26.115 42.3405 26.3278 43.1355 26.6913 43.7568C27.2955 44.9649 27.3216 44.9893 28.211 44.0345C30.2545 42.4359 33.127 43.7007 35.0714 44.8107C36.599 45.6635 36.0944 48.7078 38.37 48.2703C38.807 48.1675 39.0435 48.5386 39.2831 48.8076C40.936 50.8227 43.6048 50.5816 44.5825 53.3448C45.2124 54.4973 45.145 55.5074 44.6097 56.6477C44.2294 58.7894 43.1725 60.3675 40.941 60.9674C39.1714 61.6007 42.1568 64.4779 38.1064 65.6253C37.0676 65.8506 36.9331 66.6435 37.0676 67.5732C37.4973 69.9679 36.9138 71.7751 34.2708 72.406C33.4892 72.6634 33.6285 73.6991 33.2576 74.2893C31.4342 77.601 33.0917 80.0171 35.4138 82.3363C33.3756 82.4562 31.1667 82.6629 30.4622 80.4761C29.5821 77.9287 28.7856 75.3592 27.4804 72.9776C27.0421 72.1778 27.3242 71.2486 27.3129 70.3812C26.9948 66.8323 23.3582 64.1761 24.0413 60.3947C24.3061 58.5008 21.5954 61.2054 18.7889 57.7586C17.8534 56.6528 15.6768 53.9801 16.0527 52.5949C16.821 50.6863 16.902 48.384 18.6758 47.0593C19.4314 46.474 19.5001 44.6488 18.0909 45.0027C14.4711 45.6063 15.2445 42.8956 13.1244 43.4103C11.6888 43.5625 10.6525 43.0936 9.5368 42.0927C6.18951 39.0247 5.22995 41.2979 3.31208 39.0233C4.59914 29.9886 8.80077 21.6164 15.2826 15.1707Z" fill="currentColor" />
//                 </svg>
//               </div>
//               <h3>Learn from Anywhere!</h3>
//             </div>
//           </div>
//         </div>
//       </div>
//     </section>
//   );
// };

// export default Expert;