import { cn } from '@/lib/cn';
import { cva, type VariantProps } from 'class-variance-authority';
import type { HTMLAttributes, ReactNode } from 'react';

const pillVariants = cva(
    'inline-flex items-center gap-2 rounded-full border font-medium',
    {
        variants: {
            tone: {
                accent: 'border-accent/30 bg-accent/5 text-accent',
                success: 'border-success/30 bg-success/10 text-success',
                neutral: 'border-border bg-muted text-muted-foreground',
            },
            size: {
                sm: 'px-2.5 py-0.5 text-[10px]',
                md: 'px-3 py-1 text-[10px]',
                lg: 'px-5 py-2 text-xs',
            },
        },
        defaultVariants: {
            tone: 'accent',
            size: 'md',
        },
    },
);

const dotVariants = cva('shrink-0 rounded-full', {
    variants: {
        tone: {
            accent: 'bg-accent',
            success: 'bg-success',
            neutral: 'bg-muted-foreground',
        },
        size: {
            sm: 'h-1 w-1',
            md: 'h-1.5 w-1.5',
            lg: 'h-2 w-2',
        },
    },
    defaultVariants: {
        tone: 'accent',
        size: 'md',
    },
});

type PillProps = HTMLAttributes<HTMLSpanElement> &
    VariantProps<typeof pillVariants> & {
        dot?: boolean;
        children: ReactNode;
    };

export function Pill({
    className,
    tone,
    size,
    dot = true,
    children,
    ...rest
}: PillProps) {
    return (
        <span className={cn(pillVariants({ tone, size }), className)} {...rest}>
            {dot && <span className={dotVariants({ tone, size })} aria-hidden />}
            {children}
        </span>
    );
}
