"use client";

import { Link } from "@/i18n/routing";
import { cn } from "@/lib/utils";

export interface SettingsSubnavItem {
  id: string;
  label: string;
  href: string;
}

interface SettingsSubnavCardProps {
  items: SettingsSubnavItem[];
  activeId: string;
  className?: string;
}

export function SettingsSubnavCard({
  items,
  activeId,
  className,
}: SettingsSubnavCardProps) {
  return (
    <aside
      className={cn(
        "overflow-hidden rounded-2xl border border-border bg-card",
        className
      )}
    >
      {items.map((item) => {
        const isActive = item.id === activeId;

        return (
          <Link
            key={item.id}
            href={item.href}
            className={cn(
              "flex h-14 items-center justify-between border-b border-border px-4 text-sm font-medium text-foreground transition-colors last:border-b-0",
              isActive && "bg-highlights-bg"
            )}
          >
            <span>{item.label}</span>
          </Link>
        );
      })}
    </aside>
  );
}