import { cva, type VariantProps } from "class-variance-authority"
import TripadvisorIcon from "../Icons/Customised/Socials/Tripadvisor"
import styles from "./tripAdvisorChip.module.css"
import { ChipStatic, withChipStatic } from "../ChipStatic"

const container = cva(styles.container, {
  variants: {
    wrapper: {
      x05: styles["padding-x05"],
      x15: styles["padding-x15"],
      x2: styles["padding-x2"],
    },
  },
  defaultVariants: {
    wrapper: undefined,
  },
})

const _chipVariant = cva("", withChipStatic({}))

interface TripAdvisorProps
  extends VariantProps<typeof container>, VariantProps<typeof _chipVariant> {
  rating: number
}

export function TripAdvisorChip({
  rating,
  wrapper,
  size = "sm",
  color = "Subtle",
}: TripAdvisorProps) {
  const content = (
    <ChipStatic size={size} color={color}>
      <TripadvisorIcon size={16} color="CurrentColor" />
      {rating}
    </ChipStatic>
  )

  return wrapper ? (
    // Wrapping the chip in a transparent container with some padding to increase the touch target
    <div className={container({ wrapper })}>{content}</div>
  ) : (
    content
  )
}