"use client";

import type { DashboardAppearanceSection } from "@/components/dashboard/appearance/appearance-types";
import {
  SettingsSubnavCard,
  type SettingsSubnavItem,
} from "@/components/dashboard/settings/settings-subnav-card";
import { useTranslations } from "next-intl";

interface AppearanceSubnavCardProps {
  activeId: DashboardAppearanceSection;
  className?: string;
}

export function AppearanceSubnavCard({
  activeId,
  className,
}: AppearanceSubnavCardProps) {
  const t = useTranslations("dashboard.appearance.sections");

  const items: SettingsSubnavItem[] = [
    {
      id: "widgets",
      label: t("widgets"),
      href: "/dashboard/appearance/widgets",
    },
    {
      id: "menu",
      label: t("menu"),
      href: "/dashboard/appearance/menu",
    },
    {
      id: "custom-css",
      label: t("customCss"),
      href: "/dashboard/appearance/custom-css",
    },
    {
      id: "custom-js",
      label: t("customJs"),
      href: "/dashboard/appearance/custom-js",
    },
    {
      id: "custom-html",
      label: t("customHtml"),
      href: "/dashboard/appearance/custom-html",
    },
    {
      id: "robots-text-editor",
      label: t("robotsTextEditor"),
      href: "/dashboard/appearance/robots-text-editor",
    },
  ];

  return (
    <SettingsSubnavCard items={items} activeId={activeId} className={className} />
  );
}