import React from "react";
import { cn } from "@/lib/utils";
import { cva, type VariantProps } from "class-variance-authority";
import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip";

const metricPillVariants = cva(
  "inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-xs font-semibold backdrop-blur-md transition-all duration-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring active:scale-[0.98] cursor-default shadow-[0_2px_10px_-3px_rgba(0,0,0,0.1)] hover:shadow-[0_8px_20px_-6px_rgba(0,0,0,0.15)] hover:-translate-y-0.5",
  {
    variants: {
      variant: {
        default: "border-border/50 bg-background/80 text-muted-foreground hover:bg-accent/80 hover:text-accent-foreground",
        info: "border-indigo-200/50 bg-indigo-50/80 text-indigo-700 dark:border-indigo-900/30 dark:bg-indigo-900/20 dark:text-indigo-400 hover:border-indigo-300/50",
        warning: "border-amber-200/50 bg-amber-50/80 text-amber-700 dark:border-amber-900/30 dark:bg-amber-900/20 dark:text-amber-400 hover:border-amber-300/50",
        error: "border-rose-200/50 bg-rose-50/80 text-rose-700 dark:border-rose-900/30 dark:bg-rose-900/20 dark:text-rose-400 hover:border-rose-300/50",
        success: "border-teal-200/50 bg-teal-50/80 text-teal-700 dark:border-teal-900/30 dark:bg-teal-900/20 dark:text-teal-400 hover:border-teal-300/50",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

interface MetricPillProps extends VariantProps<typeof metricPillVariants> {
  label?: string;
  value: React.ReactNode;
  icon?: React.ReactNode;
  tooltip?: string;
  className?: string;
}

export const MetricPill = ({
  label,
  value,
  icon,
  tooltip,
  variant,
  className,
}: MetricPillProps) => {
  const content = (
    <div className={cn(metricPillVariants({ variant }), className)}>
      {icon}
      <div className="flex items-center gap-1.5">
        {label && <span className="opacity-80">{label}</span>}
        <span className="font-semibold text-foreground">{value}</span>
      </div>
    </div>
  );

  if (!tooltip) return content;

  return (
    <Tooltip>
      <TooltipTrigger asChild>
        {content}
      </TooltipTrigger>
      <TooltipContent side="bottom" className="text-[11px]">
        {tooltip}
      </TooltipContent>
    </Tooltip>
  );
};