"use client"

import { useIntl } from "react-intl"

import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import type { ComponentProps } from "react"

interface ShowMoreButtonProps extends ComponentProps<typeof Button> {
  showLess?: boolean
  textShowMore?: string
  textShowLess?: string
  loadMoreData: () => void
}

export default function ShowMoreButton({
  variant = "Text",
  color = "Primary",
  size = "Medium",
  typography = "Body/Paragraph/mdBold",
  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}
      typography={typography}
      {...props}
    >
      {showLess ? (
        <>
          <MaterialIcon icon="keyboard_arrow_up" color="CurrentColor" />
          <span>{textShowLess}</span>
        </>
      ) : (
        <>
          <MaterialIcon icon="keyboard_arrow_down" color="CurrentColor" />
          <span>{textShowMore}</span>
        </>
      )}
    </Button>
  )
}