import { Navigation } from "../components";
import React from "react";
import tw from "twin.macro";

export default {
  title: "page-ui/Navigation",
  component: Navigation,
};

const Template = (args) => (
  <div
    style={{
      position: "relative",
    }}
  >
    <Navigation {...args} />
  </div>
);

const mockNavigation = {
  templateAlignment: "left",
  hasDivider: true,
  logoName: "Playwork",
  // logoImage: "https://logos-world.net/wp-content/uploads/2020/12/Lays-Logo.png",
  navMenuList: [
    {
      title: "home",
      link: "",
      type: "internal",
    },
    {
      title: "contact",
      link: "https://www.google.com/",
      type: "extranal",
    },
  ],
  backgroundColor: "#34495E",
  textColor: "#FFFFFF",
  backgroundOpacity: 0.7
};

export const Default = Template.bind({});
Default.args = {
  metaData: mockNavigation,
  navigationRef: null,
};

export const Right = Template.bind({});
Right.args = {
  metaData: { ...mockNavigation, templateAlignment: "right" },
  navigationRef: null,
};

export const Center = Template.bind({});
Center.args = {
  metaData: { ...mockNavigation, templateAlignment: "center" },
  navigationRef: null,
};

export const backgroundImage = Template.bind({});
backgroundImage.args = {
  metaData: {
    ...mockNavigation,
    backgroundImage: {
      arrange: "fill",
      image:
        "https://images.unsplash.com/photo-1494783367193-149034c05e8f?ixid=MnwzODU1MzZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njk5NzcwODk&ixlib=rb-4.0.3&w=1920&q=70",
    },
  },
  navigationRef: null,
};



export const Mobile = Template.bind({});
Mobile.args = {
  metaData: { ...mockNavigation, isMobile: true },
  navigationRef: null,
};