import { Icon } from "@iconify/react";
import { FloatingLabel } from "@/components/floating-label";
import { FakeRelativeWindow, RestoreWindowsButton } from "./client-windows";
import Image from "next/image"
import Link from "next/link";
import { ChristmasProperty } from "./events/christmas";

export const FakeWindow = ({
  windowText, children
}: {
  windowText: string
  children: React.ReactNode
}) => (
  <div className="relative md:bg-background mx-auto w-[480px] md:w-[520px] md:border border-primary z-10">
    <ChristmasProperty
      img="/images/event_santahat1.png"
      size={180}
      left={-60}
      top={-80}
    />
    <div className="p-1 pb-0">
      <div className="hidden md:flex bg-primary p-2 justify-between text-background">
        <div className="ms-1 pointer-events-none">
          {windowText}
        </div>
        <div className="inline-flex">
          <RestoreWindowsButton className="border-outset px-2 text-xs me-2">
            Restore Windows
          </RestoreWindowsButton>
          <FloatingLabel placeholder="Useless button btw">
            <div className="flex gap-2">
              <button className="bg-primary border border-[#FFA826] border-outset p-1"><Icon icon="lucide:minus"/></button>
              <button className="bg-primary border border-[#FFA826] border-outset p-1"><Icon icon="lucide:x"/></button>
            </div>
          </FloatingLabel>
        </div>
      </div>
    </div>
    <div className="m-1 md:border border-primary">
      <div className="md:p-8">
        {children}
      </div>
    </div>
  </div>
)

export const HomeWindows = () => (
  <div className="relative">
    <FakeRelativeWindow
      windowText="nola.png"
      className="-right-[73%] top-[1300px] z-20"
      draggable
    >
      <FloatingLabel placeholder="This is Nola, my OC :3">
        <div className="relative">
          <ChristmasProperty img="/images/event_santahat1.png" size={150} top={-40} left={70} flip />
          <Image
            className=""
            alt="Nola"
            src="/images/nola.png"
            width={200}
            height={200}
          />
        </div>
      </FloatingLabel>
    </FakeRelativeWindow>
    <FakeRelativeWindow
      windowText="bouncing_coral.exe"
      className="-left-[78%] top-[260px] z-20"
    >
      <Link
        href="https://x.com/JoelGuerraC/status/1287088236171603969/photo/1"
        target="_blank"
      >
        <Image
          className="animate-silly-bouncing"
          alt="Bounce Coral"
          src="/images/coral-a1.png"
          width={200}
          height={200}
          quality={10}
          unoptimized
        />
      </Link>
    </FakeRelativeWindow>
    <FakeRelativeWindow
      windowText="coral-1.exe"
      className='-left-[75%] top-[1980px] z-10'
      draggable
    >
      <Image
        alt="Coral 1"
        src="https://media.tenor.com/J-gqkU0R8VgAAAAi/coral-glasses-ena-dream-bbq.gif"
        width={200}
        height={200}
        quality={10}
        unoptimized
      />
    </FakeRelativeWindow>
    <FakeRelativeWindow
      windowText="ena_spin.obj"
      className="-right-[85%] top-[440px] z-10"
      draggable
    >
      <Image
        alt="Coral Cupcake"
        src="https://media.tenor.com/Uv-PLe5GIe0AAAAi/gyaruface.gif"
        width={240}
        height={200}
        quality={10}
        priority={false}
        unoptimized
      />
    </FakeRelativeWindow>
  </div>
);