import React from 'react';
import { Splide, SplideSlide } from '@splidejs/react-splide';
import '@splidejs/splide/dist/css/themes/splide-default.min.css';
import { Link } from 'gatsby';

const NavbarMobile = ({ className }) => {
  if (typeof window === "undefined") {
    return <p>Server Render</p>
  }

  return (
    <Splide
      className={`w-full h-full flex justify-center items-center ${className}`}
      options={{
        type: 'loop',
        direction: 'ttb',
        width: '100%',
        heightRatio: 1.33,
        focus: 'center',
        autoWidth: true,
        autoHeight: true,
        perMove: 1,
        gap: '0.2rem',
        arrows: false,
        pagination: false,
      }}
    >
      <SplideSlide className="text-center w-full">
        <Link to="/canvas-and-paper"
              className={`text-center text-2xl sm:text-3xl uppercase transition-all`}>
              Canvas & Paper</Link>
      </SplideSlide>
      <SplideSlide className="text-center w-full">
        <Link to="/digital"
              className={`text-2xl sm:text-3xl uppercase transition-all`}>
              Digital</Link>
      </SplideSlide>
      <SplideSlide className="text-center w-full">
        <Link to="/analog"
              className={`text-2xl sm:text-3xl uppercase transition-all`}>
              Analog</Link>
      </SplideSlide>
      <SplideSlide className="text-center w-full">
        <Link to="/fashion"
              className={`text-2xl sm:text-3xl uppercase transition-all`}>
              Fashion</Link>
      </SplideSlide>
      <SplideSlide className="text-center w-full">
        <Link to="/moving-image"
              className={`text-2xl sm:text-3xl uppercase transition-all`}>
              Moving Image</Link>
      </SplideSlide>
      <SplideSlide className="text-center w-full">
        <Link to="/sounds"
              className={`text-2xl sm:text-3xl uppercase transition-all`}>
              Sounds</Link>
      </SplideSlide>
      <SplideSlide className="text-center w-full">
        <Link to="/sculpture"
              className={`text-2xl sm:text-3xl uppercase transition-all`}>
              Sculpture</Link>
      </SplideSlide>
      <SplideSlide className="text-center w-full">
        <Link to="/about"
              className={`text-2xl sm:text-3xl uppercase transition-all`}>
              About</Link>
      </SplideSlide>
    </Splide>
  )
}

export default NavbarMobile