"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 styles from "./seeAllCard.module.css"

interface SeeAllCardProps {
  onPress: () => void
}

export function SeeAllCard({ onPress }: SeeAllCardProps) {
  const intl = useIntl()

  return (
    <div className={styles.card}>
      <Button
        variant="Secondary"
        size="Medium"
        typography="Body/Paragraph/mdBold"
        onPress={onPress}
      >
        {intl.formatMessage({ id: "common.seeAll", defaultMessage: "See all" })}
        <MaterialIcon icon="chevron_right" color="CurrentColor" />
      </Button>
    </div>
  )
}