import * as React from 'react'
import { cva, type VariantProps } from 'class-variance-authority'
import { cn } from '@/lib/utils'

const tagVariants = cva(
  'inline-flex items-center gap-1 rounded-xs text-txt-primary-specialmap-normal transition-colors backdrop-blur-lg relative overflow-hidden',
  {
    variants: {
      variant: {
        default: 'bg-surface-element-normal',
        light: 'bg-surface-element-light-normal',
        dark: 'bg-surface-element-dark-normal',
        teal: 'bg-gradient-to-r from-mint-40 to-mint-20',
        blue: '',
        purple: '',
        pink: 'bg-gradient-to-r from-magenta-50 to-magenta-30',
        magenta: '',
        orange: '',
        mint: '',
        // violet: "bg-violet-20",
        violet: '',
        red: 'bg-red-20',
        primary: '',
      },
      size: {
        large: 'px-2 py-1.5 txt-label-m',
        small: 'px-1 py-0.5 txt-label-s',
        mini: 'px-0.5 h-4 txt-label-s',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'large',
    },
  }
)

const tagNestedVariants = cva('absolute inset-0', {
  variants: {
    variant: {
      default: 'bg-surface-element-normal',
      light: 'bg-surface-element-light-normal',
      dark: 'bg-surface-element-dark-normal',
      teal: 'bg-gradient-to-r from-mint-40 to-mint-20',
      blue: 'bg-[var(--glo-color-blue-40)] opacity-45',
      purple: 'bg-[var(--glo-color-violet-40)] opacity-45',
      pink: 'bg-gradient-to-r from-magenta-50 to-magenta-30',
      magenta: 'bg-[var(--glo-color-magenta-50)] opacity-45',
      orange: 'bg-[var(--glo-color-orange-50)] opacity-45',
      mint: 'bg-[var(--glo-color-mint-40)] opacity-45',
      violet: 'bg-[var(--glo-color-violet-40)] opacity-45',
      red: 'bg-red-20',
      primary: 'bg-gradient-to-r bg-primary-gradient-normal',
    },
  },
})

export interface TagProps
  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof tagVariants> {
  children: React.ReactNode
}

const Tag = React.forwardRef<HTMLDivElement, TagProps>(
  ({ className, variant, size, children, ...props }, ref) => {
    return (
      <div className={cn(tagVariants({ variant, size, className }))} ref={ref} {...props}>
        <div className={cn(tagNestedVariants({ variant }))} />
        <div className="relative inline-flex items-center gap-1">{children}</div>
      </div>
    )
  }
)
Tag.displayName = 'Tag'

export { Tag, tagVariants }
