import Link from 'next/link';
import Button from '../../../components/Button';
import InlineLink from "../../../components/InlineLink";
import classnames from 'classnames';

import { Schibsted_Grotesk } from 'next/font/google'

const font = Schibsted_Grotesk({ subsets: ['latin'] })

export default function Broker() {
  return (
    <div className="w-full h-full flex bg-black">
      <div className="w-full h-full flex p-4 bg-bluetang rounded-4xl">
        {/* <div className="w-1/24 h-full flex justify-end">
          <div className="w-4 flex flex-col justify-end z-1 bg-deepcove">
            <div className={classnames(
                "h-5 -mb-[3px] relative border-b-6 border-l-6 rounded-bl-3xl rounded-out-br-3xl border-deepcove bg-atmosphere", 
                )} />
            <div className={classnames(
                "h-5 -mt-[3px] relative border-t-6 border-l-6 rounded-tl-3xl rounded-out-tr-3xl border-deepcove bg-atmosphere",
                )} />
          </div>
        </div> */}
        <div className="w-full h-full flex p-4 bg-atmosphere rounded-4xl">
          <div className="w-full h-full flex p-1 bg-bronze rounded-4xl">
            <div className="w-full h-full flex p-1 bg-copper rounded-3xl">
              <div className="w-full h-full flex p-5 bg-deepcove rounded-3xl flex flex-col justify-start">
                <div className="relative w-full h-20 p-2 flex flex-col justify-start">
                  {/* <div className="w-6/7 h-full pl-3 flex flex-col justify-center text-3xl text-left">
                    Dashboard | Items | Go | Here | More | Dashboard | Items | Go | Here | Too
                  </div>
                    <div className="w-1/7 flex flex-col justify-center items-center space-y-1 text-sm font-semibold">
                      <Button className="h-8 w-39 bg-deepcove hover:bg-bluetang text-bluemana py-1 px-4 rounded">
                          Change User Type
                      </Button>
                      <Button className="h-8 w-39 bg-platinum text-copper hover:text-bronze py-1 px-4 rounded border-1 border-copper hover:border-bronze">
                          Sign Out
                      </Button>
                  </div> */}
                  {/* <div className={`w-11/12 flex flex-col justify-start mb-[14px]`}> */}
                    <div className="flex justify-between bg-deepcore">
                      <div className={classnames(
                          "mb-[7px] text-4xl text-left z-1 text-bluemana font-semibold"
                      )}>
                          Tom McSwain's Dashboard
                      </div>
                      <div className="w-2/7 flex justify-center space-x-2 text-sm font-semibold">
                        <Button className="h-9 hover:bg-atmosphere bg-deepcove text-platinum py-1 px-4 rounded border-2 border-atmosphere">
                            Change User Type
                        </Button>
                        <Link href="/" passHref>
                          <button className="h-9 bg-copper text-platnium py-1 px-4 rounded hover:bg-bronze">
                              Sign Out
                          </button>
                        </Link>
                        {/* <Button className="h-9 bg-copper text-platnium py-1 px-4 rounded hover:bg-bronze">
                            Sign Out
                        </Button> */}
                      </div>
                    </div>
                    <div className={classnames(
                        "w-full h-[6px] ml-[-52px] rounded-r bg-bluetang"
                        )}>
                    </div>
                </div>
                <div className="h-full flex flex-col justify-start rounded-3xl">
                  <div className="flex gap-[2px] px-10 justify-center text-bluemana text-xl">
                    <a className="relative rounded-out-b-2xl bg-platinum text-deepcove font-semibold px-8 py-2 rounded-t-2xl z-10">
                      Dashboard Home
                    </a>
                    <a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
                      Thing 1
                    </a>
                    <a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
                      Thing 2
                    </a>
                    <a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
                      Thing 3
                    </a>
                    <a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
                      Thing 4
                    </a>
                    <a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
                      Thing 5
                    </a>
                    <a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
                      Thing 6
                    </a>
                    <a className="relative rounded-out-b-2xl bg-bluetang px-8 py-2 rounded-t-2xl">
                      Thing 7
                    </a>
                  </div>
                  {/* <div className="w-full p-3 flex justify-between items-center text-2xl">
                    <InlineLink alt >Dashboard Home</InlineLink>
                    <InlineLink alt >Thing 1</InlineLink>
                    <InlineLink alt >Thing 2</InlineLink>
                    <InlineLink alt >Thing 3</InlineLink>
                    <InlineLink alt >Thing 4</InlineLink>
                    <InlineLink alt >Thing 5</InlineLink>
                    <InlineLink alt >Thing 6</InlineLink>
                    <InlineLink alt >Thing 7</InlineLink>
                  </div> */}
                  <div className={classnames("w-full flex flex-col justify-center items-start px-4 pt-6 pb-4 bg-platinum space-y-4 text-left text-deepcove text-lg rounded-2xl")} >
                    <div className={classnames("w-full text-2xl font-semibold")} >
                        Thing 1
                    </div>
                    <div className={classnames("w-full", font.className)} >
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat non dolor ut luctus. Suspendisse dictum accumsan dolor. Fusce facilisis ante non dolor cursus, sit amet placerat lectus maximus. Pellentesque rutrum nibh ipsum, quis dignissim massa ornare accumsan. Duis consectetur, mauris sit amet faucibus tempus, neque felis lobortis enim, nec commodo eros neque sed ante. Proin dictum congue risus, ac volutpat neque sagittis vitae. Nam mollis elit ut est hendrerit, at iaculis tellus varius. Proin vitae mi sit amet dolor auctor maximus sit amet in sem. Ut tellus ipsum, mollis sed mi nec, ultrices imperdiet tortor. In sed nisi neque. Donec orci urna, porttitor sit amet auctor non, mattis vitae quam. Donec bibendum est non faucibus vulputate. Quisque sagittis dolor ligula, vitae finibus tortor varius id.
                      <br /> 
                      <br />      
                      Fusce volutpat vitae eros ac ullamcorper. Nulla facilisi. Suspendisse sit amet faucibus orci. Donec blandit mollis placerat. Nullam sed dui turpis. Phasellus laoreet libero non risus ultricies dictum. Pellentesque at bibendum neque. Curabitur eu nisl a massa viverra commodo. Quisque ac arcu vitae mauris dapibus dignissim in porta magna. Etiam feugiat tellus eget enim commodo, nec viverra purus dictum. Curabitur maximus consequat mauris, eu egestas risus tincidunt eget. Donec ipsum est, imperdiet a accumsan in, interdum id tellus. Proin id consequat risus. Donec sit amet augue in lorem venenatis iaculis. 
                    </div>
                    <div className={classnames("w-full text-2xl font-semibold")} >
                        Thing 2
                    </div>
                    <div className={classnames("w-full", font.className)} >
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat non dolor ut luctus. Suspendisse dictum accumsan dolor. Fusce facilisis ante non dolor cursus, sit amet placerat lectus maximus. Pellentesque rutrum nibh ipsum, quis dignissim massa ornare accumsan. Duis consectetur, mauris sit amet faucibus tempus, neque felis lobortis enim, nec commodo eros neque sed ante. Proin dictum congue risus, ac volutpat neque sagittis vitae. Nam mollis elit ut est hendrerit, at iaculis tellus varius. Proin vitae mi sit amet dolor auctor maximus sit amet in sem. Ut tellus ipsum, mollis sed mi nec, ultrices imperdiet tortor. In sed nisi neque. Donec orci urna, porttitor sit amet auctor non, mattis vitae quam. Donec bibendum est non faucibus vulputate. Quisque sagittis dolor ligula, vitae finibus tortor varius id.
                      <br /> 
                      <br />      
                      Fusce volutpat vitae eros ac ullamcorper. Nulla facilisi. Suspendisse sit amet faucibus orci. Donec blandit mollis placerat. Nullam sed dui turpis. Phasellus laoreet libero non risus ultricies dictum. Pellentesque at bibendum neque. Curabitur eu nisl a massa viverra commodo. Quisque ac arcu vitae mauris dapibus dignissim in porta magna. Etiam feugiat tellus eget enim commodo, nec viverra purus dictum. Curabitur maximus consequat mauris, eu egestas risus tincidunt eget. Donec ipsum est, imperdiet a accumsan in, interdum id tellus. Proin id consequat risus. Donec sit amet augue in lorem venenatis iaculis. 
                    </div>
                    <div className={classnames("w-full text-2xl font-semibold")} >
                        Thing 3
                    </div>
                    <div className={classnames("w-full", font.className)} >
                      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat non dolor ut luctus. Suspendisse dictum accumsan dolor. Fusce facilisis ante non dolor cursus, sit amet placerat lectus maximus. Pellentesque rutrum nibh ipsum, quis dignissim massa ornare accumsan. Duis consectetur, mauris sit amet faucibus tempus, neque felis lobortis enim, nec commodo eros neque sed ante. Proin dictum congue risus, ac volutpat neque sagittis vitae. Nam mollis elit ut est hendrerit, at iaculis tellus varius. Proin vitae mi sit amet dolor auctor maximus sit amet in sem. Ut tellus ipsum, mollis sed mi nec, ultrices imperdiet tortor. In sed nisi neque. Donec orci urna, porttitor sit amet auctor non, mattis vitae quam. Donec bibendum est non faucibus vulputate. Quisque sagittis dolor ligula, vitae finibus tortor varius id.
                      <br /> 
                      <br />      
                      Fusce volutpat vitae eros ac ullamcorper. Nulla facilisi. Suspendisse sit amet faucibus orci. Donec blandit mollis placerat. Nullam sed dui turpis. Phasellus laoreet libero non risus ultricies dictum. Pellentesque at bibendum neque. Curabitur eu nisl a massa viverra commodo. Quisque ac arcu vitae mauris dapibus dignissim in porta magna. Etiam feugiat tellus eget enim commodo, nec viverra purus dictum. Curabitur maximus consequat mauris, eu egestas risus tincidunt eget. Donec ipsum est, imperdiet a accumsan in, interdum id tellus. Proin id consequat risus. Donec sit amet augue in lorem venenatis iaculis. 
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}