import React, {ReactNode} from "react";
import {LucideIcon} from 'lucide-react';

type BadgeVariant = 'primary' | 'success' | 'warning' | 'error' | 'muted';
type BadgeSize = 'sm' | 'md';
type BadgeShape = 'pill' | 'rounded';

interface BadgeProps {
    variant?: BadgeVariant;
    size?: BadgeSize;
    shape?: BadgeShape;
    icon?: LucideIcon;
    children?: ReactNode;
    interactive?: boolean;
    floating?: boolean;
}

const variantClasses: Record<BadgeVariant, string> = {
    primary: 'bg-primary/20 text-primary border border-primary/30',
    success: 'bg-success/20 text-success border border-success/30',
    warning: 'bg-warning/20 text-warning border border-warning/30',
    error: 'bg-error/20 text-error border border-error/30',
    muted: 'bg-secondary text-muted border border-secondary',
};

const sizeClasses: Record<BadgeSize, string> = {
    sm: 'text-[10px] px-2 py-0.5',
    md: 'text-xs px-3 py-1',
};

const shapeClasses: Record<BadgeShape, string> = {
    pill: 'rounded-full',
    rounded: 'rounded-lg',
};

export default function Badge(
    {
        variant = 'primary',
        size = 'md',
        shape = 'pill',
        icon: Icon,
        children,
        interactive = false,
        floating = false,
    }: BadgeProps) {
    return (
        <span
            className={`
                font-medium inline-flex items-center gap-1.5
                ${shapeClasses[shape]}
                ${variantClasses[variant]}
                ${sizeClasses[size]}
                ${interactive ? 'cursor-pointer group transition-colors' : ''}
                ${floating ? 'absolute top-3 right-3' : ''}
            `}
        >
            {Icon && <Icon className="w-3 h-3" strokeWidth={1.75}/>}
            {children}
        </span>
    );
}