import { useState } from "react";
import Dropdown from "@/components/Dropdown";
import clsx from "clsx";

interface Props {
  title: string;
  content: string;
  open?: boolean;
  setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
}

const Passage: React.FC<Props> = ({ title, content, open: externalOpen, setIsOpen: externalSetIsOpen }) => {
  const [internalOpen, setInternalOpen] = useState(false);

  const isOpen = externalOpen ?? internalOpen;
  const setIsOpen = externalSetIsOpen ?? setInternalOpen;

  const paragraphs = content.split('\n\n');

  return (
    <Dropdown
      title={title}
      className={clsx(
        "bg-white p-6 w-full items-center",
        isOpen ? "rounded-t-lg border-b border-gray-200" : "rounded-lg shadow-lg"
      )}
      titleClassName="text-2xl font-semibold text-gray-800"
      contentWrapperClassName="p-6 bg-white rounded-b-lg shadow-md transition-all duration-300 ease-in-out"
      open={isOpen}
      setIsOpen={setIsOpen}
    >
      <div>
        {paragraphs.map((paragraph, index) => (
          <p
            key={index}
            className={clsx(
              "text-justify",
              index < paragraphs.length - 1 ? 'mb-4' : 'mb-6'
            )}
          >
            {paragraph.trim()}
          </p>
        ))}
      </div>
    </Dropdown>
  );
}

export default Passage;