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

const container = cva(styles.container, {
  variants: {
    size: {
      default: null,
      small: styles.containerSmall,
    },
  },
  defaultVariants: {
    size: "default",
  },
})

const chip = cva(styles.tripAdvisor, {
  variants: {
    size: {
      default: null,
      small: styles.tripAdvisorSmall,
    },
    color: {
      default: null,
      subtle: styles.tripAdvisorSubtle,
    },
  },
  defaultVariants: {
    size: "default",
    color: "default",
  },
})

type TripAdvisorProps = {
  rating: number
  wrapper?: boolean
} & VariantProps<typeof chip>

export function TripAdvisorChip({
  rating,
  wrapper = true,
  size,
  color,
}: TripAdvisorProps) {
  const content = (
    <div className={chip({ size, color })}>
      <TripadvisorIcon size={16} color="CurrentColor" />
      <Typography variant="Tag/sm">
        <p>{rating}</p>
      </Typography>
    </div>
  )

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