import React, { useMemo } from "react";

const statusBadge = (percent) => {
  if (percent >= 90) return { label: "پر شده", cls: "border-red-500/30 bg-red-500/10 text-red-700 dark:text-red-200" };
  if (percent >= 70) return { label: "در حال پر شدن", cls: "border-yellow-500/30 bg-yellow-500/10 text-yellow-800 dark:text-yellow-200" };
  return { label: "نرمال", cls: "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-200" };
};

export default function SpaceStatusBadge({ percent = 0 }) {
  const badge = useMemo(() => statusBadge(percent), [percent]);
  return (
    <span className={`flex-none text-xs px-3 py-2 rounded-full border ${badge.cls}`}>
      {badge.label} • {percent}%
    </span>
  );
}
