"use client";

import type { OfferStatus } from "@/types/offer";

const statusLabelMap: Record<OfferStatus, string> = {
  pending: "Pending",
  shared: "Shared",
  sold: "Sold",
  rejected: "Rejected",
};

const statusClassMap: Record<OfferStatus, { text: string; dot: string }> = {
  pending: {
    text: "text-[var(--color-amber)]",
    dot: "bg-[var(--color-amber-light)]",
  },
  shared: {
    text: "text-[var(--color-blue)]",
    dot: "bg-[var(--color-blue)]",
  },
  sold: {
    text: "text-[var(--color-green)]",
    dot: "bg-[var(--color-green)]",
  },
  rejected: {
    text: "text-[var(--color-red)]",
    dot: "bg-[var(--color-red)]",
  },
};

export default function OfferStatusBadge({ status }: { status: OfferStatus }) {
  const label = statusLabelMap[status] || "Pending";
  const classes = statusClassMap[status] || statusClassMap.pending;

  return (
    <span className="flex items-center gap-1.5">
      <span className={`h-1.5 w-1.5 rounded-full ${classes.dot}`} />
      <span className={`whitespace-nowrap text-[13px] font-medium ${classes.text}`}>
        {label}
      </span>
    </span>
  );
}