import type { TeamRole } from "@/models/TeamMember";

export const ROLE_LABEL: Record<TeamRole, string> = {
  owner: "Takım Sahibi",
  manager: "Takım Yöneticisi",
  staff: "Takım Yetkilisi",
  design: "Tasarım Birimi",
  support: "Destek Birimi",
  sales: "Satış Sorumlusu",
};

const ROLE_STYLES: Record<TeamRole, { bg: string; text: string; ring: string }> = {
  owner: {
    bg: "linear-gradient(135deg, #dc2626 0%, #b91c1c 100%)",
    text: "#fff",
    ring: "rgba(220, 38, 38, 0.45)",
  },
  manager: {
    bg: "linear-gradient(135deg, #f472b6 0%, #ec4899 100%)",
    text: "#fff",
    ring: "rgba(244, 114, 182, 0.45)",
  },
  staff: {
    bg: "linear-gradient(135deg, #f97316 0%, #ea580c 100%)",
    text: "#fff",
    ring: "rgba(249, 115, 22, 0.45)",
  },
  design: {
    bg: "linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)",
    text: "#fff",
    ring: "rgba(59, 130, 246, 0.45)",
  },
  support: {
    bg: "linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)",
    text: "#0f172a",
    ring: "rgba(248, 250, 252, 0.45)",
  },
  sales: {
    bg: "linear-gradient(135deg, #22c55e 0%, #16a34a 100%)",
    text: "#fff",
    ring: "rgba(34, 197, 94, 0.45)",
  },
};

export function RoleBadge({
  role,
  size = "md",
}: {
  role: TeamRole;
  size?: "sm" | "md";
}) {
  const style = ROLE_STYLES[role];
  const dim =
    size === "sm"
      ? "px-2.5 py-0.5 text-[10px]"
      : "px-3 py-1 text-xs";

  return (
    <span
      className={`inline-flex items-center font-semibold rounded-full ${dim} shadow-sm`}
      style={{
        background: style.bg,
        color: style.text,
        boxShadow: `0 0 0 1px ${style.ring}, 0 4px 12px ${style.ring}`,
      }}
    >
      {ROLE_LABEL[role]}
    </span>
  );
}