import React from "react";
//icons
import ShowMoreLight from "../../assets/icons/arrowLight.svg";
import ShowMoreDark from "../../assets/icons/arrowDark.svg";

import styles from "./ShowMore.module.scss";

import Image from "next/image";

type ShowMoreT = {
  id: string;
  handleClick: (e: any) => void;
  theme?: "light" | "dark";
  isActive: boolean;
};

const ShowMore = (props: ShowMoreT) => {
  const { id, handleClick, theme = "light", isActive } = props;

  return (
    <div
      className={
        theme === "light"
          ? styles.light_show_more_button
          : styles.dark_show_more_button
      }
      onClick={handleClick}
      data-id={id}
    >
      <div>
        <p>{isActive ? "hide" : "show more"}</p>
        <div />
      </div>
      <Image
        alt="Arrow"
        className={
          isActive
            ? styles.active_show_more_icon
            : styles.disactive_show_more_icon
        }
        src={theme === "light" ? ShowMoreLight : ShowMoreDark}
      />
    </div>
  );
};

export default ShowMore;