import React, { useState, useEffect } from "react";
import { HiOutlineUserGroup } from "react-icons/hi";
import { useTranslation } from "react-i18next";
import { TbReportSearch } from "react-icons/tb";
import userBehavior from "../../../assets/images/image19.png";
import userInformation from "../../../assets/images/image20.png";
import userInteraction from "../../../assets/images/image21.png";

// const listApproach = [
//   {
//     title: "Step 1​",
//     contents: [
//       {
//         content:
//           "Build MVP version of product that provides a free chatbot service on diseases for users.",
//       },
//       {
//         content:
//           "Attract a large number of users to experience the best features of the product.​",
//       },
//       {
//         content:
//           "Become an application that users use before they use Google.​",
//       },
//     ],
//   },
//   {
//     title: "Step 2​",
//     contents: [
//       {
//         content: "Add more accurate and reliable data sources.",
//       },
//       {
//         content:
//           "For each answer, additional questions will be asked to encourage users to provide more information.​",
//       },
//       {
//         content:
//           "Enhance the ability to synthesize disease information from conversation history with users.​​",
//       },
//     ],
//   },
//   {
//     title: "Step 3",
//     contents: [
//       {
//         content: "Refine the product based on user feedback.​",
//       },
//       {
//         content: "Provide additional valuable services such as: ​",
//         navcontent: [
//           "Suggesting reputable clinics to users.",
//           "Booking medical appointments.",
//         ],
//       },
//     ],
//   },
// ];
const Approach = () => {
  const { t } = useTranslation("approachSectionHealthCare");
  const [appRoachData, setAppRoachData] = useState([]);
  useEffect(() => {
    setAppRoachData(t("data", { returnObjects: true }));
    console.log(appRoachData);
  }, [t]);
  return (
    <div
      className="container lg:w-[94%] mx-auto text-black md:min-h-[100vh] animate-on-scroll my-20 relative"
      id="appRoach"
    >
      <h1 className="text-4xl font-bold text-center pb-20 ">The Approach​ ​</h1>
      <div className="flex flex-col items-center gap-y-6 md:flex-row md:justify-around md:absolute md:top-[50%] md:translate-y-[-50%]">
        {appRoachData.map((item: any) => {
          return (
            <div
              data-aos="zoom-in"
              data-aos-duration="500"
              className="flex flex-col shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)] 
            hover:shadow-[0_0px_16px_4px_rgba(0,0,0,0.3)] 
            transition-all duration-500  group w-[60%] p-4 rounded-lg md:w-[30%] md:min-h-[360px] lg:w-[25%] "
            >
              <div className=" transition-all duration-500 ease-in-out md flex flex-col gap-y-4">
                <p className=" text-2xl text-center" key={item.title}>
                  {item.title}
                </p>
                <ul className="">
                  {item.contents.map((item: any, index: any) => {
                    return (
                      <>
                        <li className="pb-2">
                          {item.content}
                          <ul>
                            {item.navcontent?.map((item: any, index: any) => {
                              return <li key={item + index}>+ {item}</li>;
                            })}
                          </ul>
                        </li>
                      </>
                    );
                  })}
                </ul>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default Approach;
