"use client"

import { useIntl } from "react-intl"

import { Button } from "../Button"
import { MaterialIcon } from "../Icons/MaterialIcon"

import type { ShowMoreButtonProps } from "./types"

export function ShowMoreButton({
  variant = "Text",
  color = "Primary",
  size = "md",
  showLess,
  textShowMore,
  textShowLess,
  loadMoreData,
  ...props
}: ShowMoreButtonProps) {
  const intl = useIntl()

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

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

  return (
    <Button
      variant={variant}
      color={color}
      size={size}
      onPress={loadMoreData}
      {...props}
    >
      {showLess ? (
        <>
          <MaterialIcon icon="keyboard_arrow_up" color="CurrentColor" />
          <span>{textShowLess}</span>
        </>
      ) : (
        <>
          <MaterialIcon icon="keyboard_arrow_down" color="CurrentColor" />
          <span>{textShowMore}</span>
        </>
      )}
    </Button>
  )
}