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: {
    variant: {
      default: null,
      small: styles.containerSmall,
    },
  },
  defaultVariants: {
    variant: 'default',
  },
})

const chip = cva(styles.tripAdvisor, {
  variants: {
    variant: {
      default: null,
      small: styles.tripAdvisorSmall,
    },
  },
  defaultVariants: {
    variant: 'default',
  },
})

type TripAdvisorProps = {
  rating: number
} & VariantProps<typeof container>

export function TripAdvisorChip({ rating, variant }: TripAdvisorProps) {
  return (
    // Wrapping the chip in a transparent container with some padding to increase the touch target
    <div className={container({ variant })}>
      <div className={chip({ variant })}>
        <TripadvisorIcon size={16} color="Icon/Interactive/Default" />
        <Typography variant="Tag/sm">
          <p>{rating}</p>
        </Typography>
      </div>
    </div>
  )
}