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

const markerVariants = cva(
  'inline-flex max-w-full items-center gap-2 rounded-full border px-2.5 py-1 text-xs leading-xs transition-colors',
  {
    variants: {
      variant: {
        neutral: 'border-border bg-fill-secondary text-text-secondary',
        info: 'border-info-border bg-info-bg text-info',
        success: 'border-success-border bg-success-bg text-success',
        warning: 'border-warning-border bg-warning-bg text-warning',
        error: 'border-error-border bg-error-bg text-error',
      },
    },
    defaultVariants: {
      variant: 'neutral',
    },
  }
)

export interface MarkerProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof markerVariants> {}

const Marker = React.forwardRef<HTMLDivElement, MarkerProps>(
  ({ className, variant = 'neutral', ...props }, ref) => (
    <div
      ref={ref}
      data-slot="marker"
      data-variant={variant}
      className={cn(markerVariants({ variant, className }))}
      {...props}
    />
  )
)
Marker.displayName = 'Marker'

export type MarkerIconProps = React.HTMLAttributes<HTMLSpanElement>

const MarkerIcon = React.forwardRef<HTMLSpanElement, MarkerIconProps>(
  ({ className, ...props }, ref) => (
    <span
      ref={ref}
      data-slot="marker-icon"
      className={cn('inline-flex size-3.5 shrink-0 items-center justify-center [&_svg]:size-3.5', className)}
      {...props}
    />
  )
)
MarkerIcon.displayName = 'MarkerIcon'

export type MarkerContentProps = React.HTMLAttributes<HTMLSpanElement>

const MarkerContent = React.forwardRef<HTMLSpanElement, MarkerContentProps>(
  ({ className, ...props }, ref) => (
    <span
      ref={ref}
      data-slot="marker-content"
      className={cn('min-w-0 truncate', className)}
      {...props}
    />
  )
)
MarkerContent.displayName = 'MarkerContent'

export { Marker, MarkerIcon, MarkerContent, markerVariants }