import { useState } from "react";
import { ChevronDownIcon, ChevronUpIcon } from "@heroicons/react/24/outline";
import { useTranslation } from "next-i18next";

const Item = ({ title, text, opening }) => {
  const { t: translate } = useTranslation();

  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(true);
  const handleClose = () => setOpen(false);

  return (
    <div className="py-8">
      {opening ? (
        <>
          <div
            onClick={open ? handleClose : handleOpen}
            className="flex items-center justify-between cursor-pointer mb-4 border-b border-zinc-700"
          >
            <p className="font-oswald text-2xl">{translate(title)}</p>

            <div className="hover:bg-zinc-100 rounded-full p-3 mb-1 mr-2">
              {open ? (
                <ChevronUpIcon className="h-6 w-6" aria-hidden="true" />
              ) : (
                <ChevronDownIcon className="h-6 w-6 " aria-hidden="true" />
              )}
            </div>
          </div>
          {open ? (
            // Aquí se añade el <br /> entre los párrafos
            Array.isArray(text) ? (
              text.map((paragraph, index) => (
                <div key={index}>
                  <p className="font-opensans text-sm text-zinc-700 leading-relaxed">
                    {translate(paragraph)}
                  </p>
                  {/* Solo añadir <br /> si no es el último párrafo */}
                  {index < text.length - 1 && <br />}
                </div>
              ))
            ) : (
              <p className="font-opensans text-sm text-zinc-700 leading-relaxed">
                {translate(text)}
              </p>
            )
          ) : null}
        </>
      ) : (
        <>
          <div className="flex items-center justify-between  mb-4 border-b border-zinc-700">
            <p className="font-oswald text-2xl">{translate(title)}</p>
          </div>
          {/* Aquí también añadimos el <br /> si es un array */}
          {Array.isArray(text) ? (
            text.map((paragraph, index) => (
              <div key={index}>
                <p className="font-opensans text-sm text-zinc-700 leading-relaxed">
                  {translate(paragraph)}
                </p>
                {/* Solo añadir <br /> si no es el último párrafo */}
                {index < text.length - 1 && <br />}
              </div>
            ))
          ) : (
            <p className="font-opensans text-sm text-zinc-700 leading-relaxed">
              {translate(text)}
            </p>
          )}
        </>
      )}
    </div>
  );
};

export default Item;
