import { Minus } from "react-feather"

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

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"
      />
    )
  }
  return (
    <div className={styles.rewardValueContainer}>
      <span className={styles.rewardValue}>{reward.value}</span>
    </div>
  )
}