"use client"

import { useIntl } from "react-intl"

import { ChevronDownIcon } from "@/components/Icons"
import Button from "@/components/TempDesignSystem/Button"

import { showMoreButtonVariants } from "./variants"

import styles from "./showMoreButton.module.css"

import type { ShowMoreButtonProps } from "./showMoreButton"

export default function ShowMoreButton({
  className,
  buttonIntent,
  intent,
  disabled,
  showLess,
  textShowMore,
  textShowLess,
  loadMoreData,
}: ShowMoreButtonProps) {
  const intl = useIntl()
  const classNames = showMoreButtonVariants({
    className,
    buttonIntent,
  })

  if (!textShowMore) {
    textShowMore = intl.formatMessage({
      id: "Show more",
    })
  }

  if (!textShowLess) {
    textShowLess = intl.formatMessage({
      id: "Show less",
    })
  }

  return (
    <div className={`${classNames} ${showLess ? styles.showLess : ""}`}>
      <Button
        className={styles.button}
        disabled={disabled}
        onClick={loadMoreData}
        variant="icon"
        type="button"
        theme="base"
        intent={intent ?? "text"}
        fullWidth={intent ? true : false}
        size={intent && "small"}
      >
        <ChevronDownIcon className={styles.icon} />
        {showLess ? textShowLess : textShowMore}
      </Button>
    </div>
  )
}