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

import type { FC } from "react"
import type { IntlShape } from "react-intl"

export function mapExperiencesToListData(
  experiences: string[],
  intl: IntlShape
): { Icon: FC<MaterialIconSetIconProps>; name: string }[] {
  return experiences.map((experience) => {
    switch (experience) {
      case "Hiking":
        return {
          Icon: (props: MaterialIconSetIconProps) => (
            <MaterialIcon icon="hiking" {...props} />
          ),
          name: intl.formatMessage({
            defaultMessage: "Hiking",
          }),
        }
      case "Kayaking":
        return {
          Icon: (props: MaterialIconSetIconProps) => (
            <MaterialIcon icon="kayaking" {...props} />
          ),
          name: intl.formatMessage({
            defaultMessage: "Kayaking",
          }),
        }
      case "Bike friendly":
        return {
          Icon: (props: MaterialIconSetIconProps) => (
            <MaterialIcon icon="pedal_bike" {...props} />
          ),
          name: intl.formatMessage({
            defaultMessage: "Bike friendly",
          }),
        }
      case "Museums":
        return {
          Icon: (props: MaterialIconSetIconProps) => (
            <MaterialIcon icon="museum" {...props} />
          ),
          name: intl.formatMessage({
            defaultMessage: "Museums",
          }),
        }
      case "Family friendly":
        return {
          Icon: (props: MaterialIconSetIconProps) => (
            <MaterialIcon icon="family_restroom" {...props} />
          ),
          name: intl.formatMessage({
            defaultMessage: "Family friendly",
          }),
        }
      case "City pulse":
        return {
          Icon: (props: MaterialIconSetIconProps) => (
            <MaterialIcon icon="location_city" {...props} />
          ),
          name: intl.formatMessage({
            defaultMessage: "City pulse",
          }),
        }
      case "Nightlife":
        return {
          Icon: (props: MaterialIconSetIconProps) => (
            <MaterialIcon icon="nightlife" {...props} />
          ),
          name: intl.formatMessage({
            defaultMessage: "Nightlife",
          }),
        }
      default:
        return {
          Icon: (props: MaterialIconSetIconProps) => (
            <MaterialIcon icon="star" isFilled {...props} />
          ),
          name: experience,
        }
    }
  })
}
