import { useState } from "react";

export const App = () => {
  
  const [isExpanded, setIsExpanded] = useState(false);
  
  return (
    <div className="grid grid-cols-1 md:grid-cols-[2fr_1fr] mt-4 gap-4 max-w-[1200px] mx-auto items-start px-3">
      <div className="grid grid-cols-2 lg:grid-cols-3 gap-4">
          <div className="aspect-[2/3] border border-gray-200" />
          <div className="aspect-[2/3] border border-gray-200" />
          <div className="aspect-[2/3] border border-gray-200" />
          <div className="aspect-[2/3] border border-gray-200" />
          <div className="aspect-[2/3] border border-gray-200" />
          <div className="aspect-[2/3] border border-gray-200" />
          <div className="aspect-[2/3] border border-gray-200" />
          <div className="aspect-[2/3] border border-gray-200" />
          <div className="aspect-[2/3] border border-gray-200" />
          <div className="aspect-[2/3] border border-gray-200" />
          <div className="aspect-[2/3] border border-gray-200" />
          <div className="aspect-[2/3] border border-gray-200" />
      </div>
      <div aria-expanded={isExpanded} className="group max-h-[80dvh] fixed bottom-0 rounded-xl bg-gray-200 grid grid-cols-1 grid-rows-[auto_minmax(0,1fr)] max-md:w-[90%] max-md:left-1/2 max-md:-translate-x-1/2 md:max-h-[calc(100dvh-24px)] md:sticky md:top-4">
        <header className="bg-[hotpink] rounded-t-xl p-3 sticky top-0">
          <div className="grid grid-cols-[minmax(0,1fr)_auto] md:grid-cols-1">
            <div>
              <p className="font-semibold text-white text-sm md:text-lg">Jouw wensenlijstje</p>
              <p className="text-sm">5 cadeaus</p>
            </div>
            <div className="md:hidden grid items-center">
              <button className="size-8 grid place-items-center hover:bg-white/10 focus-visible:bg-white-10 transition-colors rounded-md" onClick={() => setIsExpanded(e => !e)}>
                <svg className="text-white -rotate-90 size-3" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Capa_1" viewBox="0 0 185.343 185.343">
                 	<g>
                  		<path d="M51.707,185.343c-2.741,0-5.493-1.044-7.593-3.149c-4.194-4.194-4.194-10.981,0-15.175    l74.352-74.347L44.114,18.32c-4.194-4.194-4.194-10.987,0-15.175c4.194-4.194,10.987-4.194,15.18,0l81.934,81.934    c4.194,4.194,4.194,10.987,0,15.175l-81.934,81.939C57.201,184.293,54.454,185.343,51.707,185.343z"/>
                 	</g>
                </svg>
              </button>
            </div>
          </div>
        </header>
        <div className="p-4 grid grid-cols-1 gap-4 overflow-auto max-md:hidden max-md:group-aria-expanded:grid">
          <div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
          <div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
          <div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
          <div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
          <div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
          <div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
          <div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
          <div className="aspect-[3/1.4] border-2 border-black bg-white rounded-2xl" />
        </div>
      </div>
    </div>
  );
}