import { Minus } from "react-feather"

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

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

import type { RewardValueProps } from "@/types/components/overviewTable"

export default function RewardValue({ reward }: RewardValueProps) {
  if (!reward) {
    return <Minus color="var(--UI-Grey-40)" />
  }
  if (!reward.value) {
    return (
      <MaterialIcon
        icon="check_circle"
        size={32}
        color="Icon/Feedback/Success"
        className={styles.checkIcon}
      />
    )
  }
  return (
    <Typography variant="Body/Paragraph/mdBold">
      <div className={styles.rewardValueContainer}>{reward.value}</div>
    </Typography>
  )
}