import Link from "next/link";
import React from "react";
import RSSIcon from "./rss-icon";
import ReadingProgress from "./reading-progress";

const CloseIcon = () => (
  <svg
    width="12"
    height="12"
    viewBox="0 0 12 12"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M1 1L11 11M1 11L11 1"
      stroke="white"
      strokeWidth="2"
      strokeLinecap="round"
    />
  </svg>
);
const MaximizeIcon = () => (
  <svg
    width="12"
    height="12"
    viewBox="0 0 12 12"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect x="1" y="1" width="10" height="10" stroke="white" strokeWidth="2" />
  </svg>
);
const MinimizeIcon = () => (
  <svg
    width="12"
    height="12"
    viewBox="0 0 12 12"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M1 6H11" stroke="white" strokeWidth="2" strokeLinecap="round" />
  </svg>
);

interface WindowProps {
  title: string;
  children: React.ReactNode;
  className?: string;
  showProgress?: boolean;
  showRss?: boolean;
}

export default function Window({
  title,
  children,
  className = "",
  showProgress = false,
  showRss = false,
}: WindowProps) {
  return (
    <div
      className={`rounded-lg border border-white/30 bg-white/70 shadow-window backdrop-blur-xl ${className}`}
    >
      <div className="rounded-t-md overflow-hidden sticky top-0 z-10">
        <div className="flex select-none items-center justify-between bg-gradient-to-b from-blue-500 to-window-title px-4 py-1.5 font-bold text-white text-sm">
          <div className="flex items-center space-x-2">
            <span>{title}</span>
            {showRss && (
              <Link href="/feed.xml" title="RSS Feed">
                <RSSIcon className="h-4 w-4 opacity-80 hover:opacity-100" />
              </Link>
            )}
          </div>
          <div className="flex items-center space-x-2">
            <div className="flex h-4 w-4 items-center justify-center opacity-80">
              <MinimizeIcon />
            </div>
            <div className="flex h-4 w-4 items-center justify-center opacity-80">
              <MaximizeIcon />
            </div>
            <Link
              href="/"
              className="flex h-4 w-4 items-center justify-center opacity-80"
            >
              <CloseIcon />
            </Link>
          </div>
        </div>
        {showProgress && <ReadingProgress />}
      </div>
      <div className="p-6">{children}</div>
    </div>
  );
}
