web/apps/scandic-web/components/Blocks/DynamicContent/Rewards/RewardIcon/index.tsx

import { mapRewardToIcon } from "./data"

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

interface RewardIconProps extends LogoAndIllustrationProps {
  rewardId: string
  iconSize?: "small" | "medium" | "large"
}

// Original SVG aspect ratio is 358:202 (≈1.77:1)
const sizeMap = {
  small: { width: 120, height: 68 }, // 40% of card width
  medium: { width: 180, height: 102 }, // 60% of card width
  large: { width: 240, height: 135 }, // 80% of card width
} as const

export function RewardIcon({
  rewardId,
  iconSize = "medium",
  ...props
}: RewardIconProps) {
  const IconComponent = mapRewardToIcon(rewardId)
  if (!IconComponent) return null

  return (
    // eslint-disable-next-line react-hooks/static-components
    <IconComponent
      {...props}
      width={sizeMap[iconSize].width}
      height={sizeMap[iconSize].height}
    />
  )
}