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
  )
}