import { ComponentConfig } from "@reacteditor/core";
import { Menu as MenuIcon } from "lucide-react";
import { Navigation, type NavigationProps } from "@/editor/components/navigation/navigation";

export const navigationEditor: ComponentConfig<NavigationProps> = {
  label: "Navigation",
  icon: <MenuIcon size={16} />,
  category: "navigation",
  global: true,
  defaultProps: {
    brand: "Maison",
    links: [
      { label: "Shop", href: "/collections" },
      { label: "Lookbook", href: "/lookbook" },
      { label: "Journal", href: "/journal" },
      { label: "About", href: "/about" },
    ],
    showSearch: "yes",
    showCart: "yes",
    sticky: "yes",
    tone: "default",
    bannerText: "",
    bannerTone: "accent",
  },
  fields: {
    brand: { label: "Brand", type: "text", contentEditable: true },
    links: {
      label: "Links",
      type: "array",
      defaultItemProps: { label: "Link", href: "/" },
      getItemSummary: (it) => it?.label || "Link",
      arrayFields: {
        label: { label: "Label", type: "text", contentEditable: true },
        href: { label: "Link", type: "text" },
      },
    },
    bannerText: {
      label: "Banner text",
      type: "text",
      contentEditable: true,
    },
    bannerTone: {
      label: "Banner tone",
      type: "select",
      options: [
        { label: "Default", value: "default" },
        { label: "Accent", value: "accent" },
        { label: "Inverse (dark)", value: "inverse" },
      ],
    },
    showSearch: {
      label: "Search icon",
      type: "radio",
      options: [
        { label: "Show", value: "yes" },
        { label: "Hide", value: "no" },
      ],
    },
    showCart: {
      label: "Cart icon",
      type: "radio",
      options: [
        { label: "Show", value: "yes" },
        { label: "Hide", value: "no" },
      ],
    },
    sticky: {
      label: "Position",
      type: "radio",
      options: [
        { label: "Sticky", value: "yes" },
        { label: "Static", value: "no" },
      ],
    },
    tone: {
      label: "Tone",
      type: "select",
      options: [
        { label: "Default", value: "default" },
        { label: "Muted", value: "muted" },
        { label: "Inverse (dark)", value: "inverse" },
      ],
    },
  },
  render: (props) => <Navigation {...props} />,
};