import { cn } from "@/lib/utils";
import { ReactNode } from "react";

interface IProps {
  status?: string;
  children: ReactNode;
}

const Status = ({ status = "draft", children }: IProps) => {
  const reds = [
    "cancelled",
    "inactive",
    "rejected",
    "failed",
    "denied",
    "blocked",
  ];
  const greens = [
    "active",
    "approved",
    "completed",
    "success",
    "verified",
    "published",
    "sent",
  ];
  const blues = ["awarded", "processing", "in-review", "scheduled", "reviewed"];
  const yellows = ["pending", "warning", "on-hold", "delayed"];
  const oranges = ["expired", "expiring", "limited"];
  const grays = ["draft", "disabled", "archived", "paused", "suspended"];

  return (
    <span
      className={cn(
        "flex items-center justify-center rounded-2xl px-3 py-2 text-center text-sm font-medium capitalize",
        {
          "bg-green text-white": greens.includes(status),
          "bg-orange-light text-white": oranges.includes(status),
          "bg-error text-white": reds.includes(status),
          "bg-blue text-white": blues.includes(status),
          "bg-gray-3 text-gray-7": grays.includes(status),
          "bg-yellow-light text-yellow-dark-2": yellows.includes(status),
          "bg-green-light-6 text-green-dark": status === "new",
          "bg-blue-light-5 text-blue-dark": status === "info",
          "bg-error-light-6 text-error-dark": status === "urgent",
          "bg-primary text-white": status === "featured",
        },
      )}
    >
      {children}
    </span>
  );
};

export default Status;