import React from "react";
import Typography from "components/typography/Typography";
import { Transition } from "@headlessui/react";

type ArticleDescriptionProps = {
  children?: React.ReactNode;
  emphasis?: "low" | "high";
  isShowing?: boolean;
};

export function ArticleDescription({
  children,
  emphasis = "high",
  isShowing = false,
}: ArticleDescriptionProps) {
  return emphasis === "low" ? (
    <div className="overflow-hidden">
      <Transition
        appear
        show={isShowing}
        enter="ease-in-out duration-200"
        enterFrom="-translate-y-full"
        enterTo="translate-y-0"
        leave="ease-in-out duration-200"
        leaveFrom="translate-y-0"
        leaveTo="-translate-y-full"
      >
        <Typography className="text-base text-gray-900">{children}</Typography>
      </Transition>
    </div>
  ) : (
    <div>
      <Typography className="text-base text-gray-900">{children}</Typography>
    </div>
  );
}

ArticleDescription.displayName = "ArticleDescription";
