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

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

export function ArticleDescription({
  children,
  className,
  emphasis = "high",
  isShowing = false,
}: ArticleDescriptionProps) {
  return emphasis === "low" ? (
    <div
      className={classNames("overflow-hidden", { "line-clamp-3": !isShowing })}
    >
      <Typography className={classNames("text-base text-gray-900", className)}>
        {children}
      </Typography>
    </div>
  ) : (
    <div>
      <Typography className="text-base text-gray-900">{children}</Typography>
    </div>
  );
}

ArticleDescription.displayName = "ArticleDescription";
