"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,
  intent,
  disabled,
  showLess,
  loadMoreData,
}: ShowMoreButtonProps) {
  const intl = useIntl()
  const classNames = showMoreButtonVariants({
    className,
    intent,
  })

  return (
    <div className={`${classNames} ${showLess ? styles.showLess : ""}`}>
      <Button
        className={styles.button}
        disabled={disabled}
        onClick={loadMoreData}
        variant="icon"
        type="button"
        theme="base"
        intent="text"
      >
        <ChevronDownIcon className={styles.icon} />
        {intl.formatMessage({ id: showLess ? "Show less" : "Show more" })}
      </Button>
    </div>
  )
}