import React from "react";
import Navigation from "./component";
import { NavigationLayouts } from "./types";
import { themeSettings, folder } from "@sc/plugins/webcomponents/v2/theme";
import { BrowserRouter as Router } from "react-router-dom";

import settings from "./settings";
import {
  sampleContentData,
  EditorWithCustomData,
} from "@sc/modules/page/Builder/Builder.stories";

export default {
  title: "Plugins|Web Components/Medium/Navigation",
  component: Navigation,
};

export const Default = () => (
  <div style={{ background: "black" }}>
    <Router>
      <Navigation
        layout={NavigationLayouts.STANDARD}
        logo={themeSettings.default.logo}
        logoHref={`/${folder}`}
        items={[
          { caption: "Consulting", href: "./consulting" },
          { caption: "Speaking", href: "./speaking" },
          { caption: "Training", href: "./training" },
          { caption: "Podcast", href: "./podcast" },
        ]}
        linkStyle={{
          color: "white",
          listStyle: "none",
          // display: "inline-block",
          padding: "20px 30px",
          fontFamily: "Roboto",
        }}
        style={{ padding: 20 }}
      />
    </Router>
  </div>
);
export const InTheEditor: React.FC = () => {
  return (
    <EditorWithCustomData
      content={[
        { id: "CustomField", parent: "u5j1r64m5rf", ...settings.default },
        ...sampleContentData,
      ]}
    />
  );
};