import React from "react";
import classNames from "../../../utils/helpers/className";

const ShowMoreButton = ({
  handleExpand,
  expand,
  hidden,
}: {
  handleExpand: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
  expand: boolean;
  hidden?: boolean;
}) => {
  return (
    <div className="flex w-full pl-6">
      {/* <div className="mt-[2%]  w-full border-t-2 border-gray-400"></div> */}
      <div className=" flex h-[1.6rem] w-full items-center justify-center">
        <div className=" h-[0.094rem] w-full border-t-[0.031rem] border-gray-400 border-opacity-40"></div>
      </div>
      <div
        className={classNames(
          !hidden ? "2xl:hidden" : "",
          "flex h-full w-auto flex-col items-center justify-center "
        )}
      >
        <button
          onClick={handleExpand}
          className="flex w-full cursor-pointer  items-center justify-center bg-transparent pl-1.5 text-sm font-bold text-violet-600"
        >
          <div className="flex h-full w-full flex-col items-center justify-center whitespace-nowrap">
            <p className="text-[0.7rem]">{expand ? null : "Show More"}</p>
          </div>
          <div className="flex w-full flex-col items-center justify-center ">
            <svg
              width="1.4rem"
              height="1.4rem"
              viewBox="0 0 20 20"
              fill="currentColor"
              data-darkreader-inline-fill=""
            >
              <path d="M14.5 6.5 10 11 5.5 6.5 4 8l6 6 6-6-1.5-1.5z"></path>
            </svg>
          </div>
        </button>
      </div>
      <div className=" flex h-[1.6rem] w-full items-center justify-center pr-6">
        <div className=" h-[0.094rem] w-full border-t-[0.031rem] border-gray-400 border-opacity-40"></div>
      </div>
    </div>
  );
};

export default ShowMoreButton;