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

export const FakeWindow = ({
  windowText, children
}: {
  windowText: string
  children: React.ReactNode
}) => (
  <div className="mx-auto w-[480px] md:w-[520px] md:border border-primary">
    <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>
        <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 className="m-1 md:border border-primary">
      <div className="md:p-8">
        {children}
      </div>
    </div>
  </div>
)

export const HomeWindows = () => (
  <div className="relative">
    {/* <FakeRelativeWindow
      windowText="featured.exe"
      className="left-[540px] top-0 z-20"
      draggable
    >
      <div className="space-y-2" style={{ width: 300 }}>
        <Image
          className=""
          alt="Left 4 Dead"
          src="https://shared.fastly.steamstatic.com/store_item_assets/steam/apps/550/header.jpg?t=1745368562"
          width={300}
          height={200}
          unoptimized
        />
        <p>Join my Left 4 Dead 2 server!</p>
      </div>
    </FakeRelativeWindow> */}
    <FakeRelativeWindow
      windowText="nola.png"
      className="-right-[73%] top-[1300px] z-20"
      draggable
    >
      <FloatingLabel placeholder="This is Nola, my OC :3">
        <Image
          className=""
          alt="Nola"
          src="/images/nola.png"
          width={200}
          height={200}
        />
      </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="coral_cupcake.mkv"
      className="-right-[85%] top-[440px] z-10"
      draggable
    >
      <Image
        alt="Coral Cupcake"
        src="https://media1.tenor.com/m/N5K-4AWj8QcAAAAC/coral-glasses-cupcake.gif"
        width={240}
        height={200}
        quality={10}
        unoptimized
      />
    </FakeRelativeWindow>
  </div>
);