"use client";
import { motion } from "framer-motion";
import { STATUS_CONFIG } from "./mockData";

interface Props {
  status: string;
  pulse?: boolean;
  size?: "xs" | "sm" | "md";
}

export function OrderStatusBadge({ status, pulse = false, size = "md" }: Props) {
  const cfg = STATUS_CONFIG[status] ?? {
    label: status,
    color: "#6b7280",
    bg: "rgba(107,114,128,0.1)",
    description: "",
  };

  const cls = {
    xs: "px-2 py-0.5 text-[9px] gap-1",
    sm: "px-2.5 py-1 text-[10px] gap-1.5",
    md: "px-3 py-1.5 text-xs gap-2",
  }[size];

  const dotCls = {
    xs: "w-1.5 h-1.5",
    sm: "w-1.5 h-1.5",
    md: "w-2 h-2",
  }[size];

  return (
    <span
      className={`inline-flex items-center rounded-full font-semibold ${cls}`}
      style={{ background: cfg.bg, color: cfg.color }}
    >
      <span className={`${dotCls} rounded-full relative shrink-0`} style={{ background: cfg.color }}>
        {pulse && (
          <motion.span
            className={`absolute inset-0 rounded-full`}
            style={{ background: cfg.color }}
            animate={{ scale: [1, 2.4, 1], opacity: [0.6, 0, 0.6] }}
            transition={{ duration: 1.8, repeat: Infinity }}
          />
        )}
      </span>
      {cfg.label}
    </span>
  );
}