import { Link, useLocation } from "react-router";
import { cn } from "@/lib/utils";

export type ShellNavItem = {
  label: string;
  to: string;
  icon: React.ReactNode;
  badge?: string;
};

export function ShellNavLink({ item }: { item: ShellNavItem }) {
  const location = useLocation();
  const active = location.pathname === item.to || location.pathname.startsWith(`${item.to}/`);

  return (
    <Link
      className={cn(
        "flex h-9 items-center gap-2.5 rounded-lg px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
        active && "bg-accent text-foreground",
      )}
      to={item.to}
    >
      <span className="text-muted-foreground [&_svg]:size-4">{item.icon}</span>
      <span className="min-w-0 flex-1 truncate">{item.label}</span>
      {item.badge && (
        <span className="rounded-full bg-card px-2 py-0.5 text-xs text-muted-foreground">
          {item.badge}
        </span>
      )}
    </Link>
  );
}

export function workspaceInitial(name: string) {
  return name.trim().slice(0, 1).toUpperCase();
}

export function workspaceColor(name: string) {
  const colors = [
    "from-indigo-500 to-violet-500",
    "from-sky-500 to-cyan-500",
    "from-emerald-500 to-teal-500",
    "from-amber-500 to-orange-500",
    "from-rose-500 to-pink-500",
    "from-slate-600 to-zinc-800",
  ];
  const index = Array.from(name).reduce((sum, char) => sum + char.charCodeAt(0), 0);
  return colors[index % colors.length];
}