import React, { useState, useEffect } from "react";
import { HiOutlineUserGroup } from "react-icons/hi";
import { TbReportSearch } from "react-icons/tb";
import { useTranslation } from "react-i18next";

import userBehavior from "../../../assets/images/icon-user-behavior.png";
import userInformation from "../../../assets/images/image20.png";
import userInteraction from "../../../assets/images/image21.png";

const listProblems = [
  {
    title: "User behavior​",
    content:
      "Satisfying the habit of searching for any unusual signs related to the user's health​",
  },
  {
    title: "Information​",
    content:
      "Providing accurate and easy-to-understand information for users​​",
  },
  {
    icon: "HiOutlineUserGroup",
    title: "Interaction​",
    content:
      "Providing a good user experience with high interactivity, encourage users to provide more valuable information about their illness​​",
  },
];
const ProblemsSection = () => {
  const { t } = useTranslation("problemsSectionHealthCare");
  const [problemsSectionData, setProblemsSectionData] = useState([]);
  useEffect(() => {
    setProblemsSectionData(t("data", { returnObjects: true }));
  }, [t]);
  return (
    <div
      className="container mx-auto text-black md:min-h-[80vh] animate-on-scroll my-20 relative"
      id="problems"
    >
      <h1 className="text-4xl font-bold text-center pb-20 relative">
        {t("title")}
      </h1>
      <div
        className="flex flex-col items-center  
        md:flex-row md:items-start  md:absolute md:top-[50%] md:left-[50%] md:translate-x-[-50%] 
      md:translate-y-[-50%] md:w-full md:shadow-[0_0px_8px_2px_rgba(0,0,0,0.1)] md:rounded-lg relative
       border-black  "
      >
        {/* [&>*:not(:first-child)]:border-l-2 */}
        {problemsSectionData.map((item: any, index) => {
          return (
            <>
              <p className="line-problems first:hidden my-auto w-[2px] h-[150px] bg-slate-400"></p>
              <div className="flex h-full justify-around [&>*:first-child]:items-center flex-1 ">
                <div className="relative flex flex-col items-center gap-y-4 flex:1 text-black p-8 rounded-lg">
                  <div className="flex flex-col gap-y-2 items-center">
                    <img className="w-[44px] h-[44px] " src={item.src} alt="" />

                    <span
                      className="text-xl font-semibold text-center"
                      key={item.title + index}
                    >
                      {item.title}
                    </span>
                  </div>
                  <span className="text-center">{item.content}</span>
                </div>
              </div>
            </>
          );
        })}
        {/* 
        <div className="flex flex-col gap-y-4 w-[250px] text-black p-8 rounded-lg">
          <div className="flex flex-col gap-y-2 items-center">
            <img
              className="w-[44px] h-[44px]"
              src={userInformation}
              alt=""
            ></img>
            <p className="text-xl font-semibold">User Information​</p>
          </div>
          <p className="text-center">
            Providing accurate and easy-to-understand information for users​
          </p>
        </div>
        <div className="my-auto w-[2px] h-[150px]  bg-slate-400"></div>
        <div className="flex flex-col gap-y-4 w-[250px] text-black p-8 rounded-lg">
          <div className="flex flex-col gap-y-2 items-center">
            <img className="w-[44px] h-[44px]" src={userInteraction} alt="" />
            <p className="text-xl font-semibold">Interaction</p>
          </div>
          <p className="text-center">
            Providing a good user experience with high interactivity, encourage
            users to provide more valuable information about their illness​
          </p>
        </div> */}
      </div>
    </div>
  );
};

export default ProblemsSection;