import classNames from "classnames"
import React from "react"

function Logo({ small }: { small?: boolean }) {
  return (
    <div className="relative flex flex-col items-center rounded-sm border-x-4 border-y-2 border-shield-gray bg-shield-lightgray md:border-x-8 md:border-y-4">
      <h1
        className={classNames(
          "font-checkpoint mx-16 my-2 flex flex-col gap-2 border-y-2 border-slate-700 text-center text-2xl leading-tight tracking-widest sm:mx-24 sm:my-3 sm:gap-3 sm:border-y-[3px] sm:text-4xl md:mx-36 md:my-4 md:gap-4 md:border-y-4 md:text-5xl",
          { "xl:gap-6 xl:py-2 xl:text-6xl": !small }
        )}
      >
        <span>Leaky</span>
        <span>Ships</span>
      </h1>
      <Screws small={small} />
    </div>
  )
}

function Screws({ small }: { small?: boolean }) {
  return (
    <>
      <Screw
        small={small}
        orientation={classNames("top-1 left-1 sm:top-2 sm:left-2", {
          "xl:top-4 xl:left-4": !small,
        })}
        rotation="rotate-[135deg]"
      />
      <Screw
        small={small}
        orientation={classNames("top-1 right-1 sm:top-2 sm:right-2", {
          "xl:top-4 xl:right-4": !small,
        })}
        rotation="rotate-[5deg]"
      />
      <Screw
        small={small}
        orientation={classNames("bottom-1 right-1 sm:bottom-2 sm:right-2", {
          "xl:bottom-4 xl:right-4": !small,
        })}
        rotation="rotate-[150deg]"
      />
      <Screw
        small={small}
        orientation={classNames("bottom-1 left-1 sm:bottom-2 sm:left-2", {
          "xl:bottom-4 xl:left-4": !small,
        })}
        rotation="rotate-[20deg]"
      />
    </>
  )
}

function Screw({
  orientation,
  rotation,
  small,
}: {
  orientation: string
  rotation: string
  small?: boolean
}) {
  return (
    <div
      className={classNames(
        "absolute flex h-3 w-3 flex-col items-center justify-center rounded-full border-[1px] border-neutral-700 bg-neutral-400 sm:h-5 sm:w-5 sm:border-2 md:h-6 md:w-6",
        { "xl:h-8 xl:w-8": !small },
        orientation
      )}
    >
      <hr
        className={classNames(
          "color w-full border-neutral-500 sm:border-t-2",
          { "xl:border-t-4": !small },
          rotation
        )}
      />
    </div>
  )
}

export default Logo
