"use client";

import { useEffect, useState } from "react";
import { Button } from "@/components/ui/button";
import Link from "next/link";
import Image from "next/image";

export default function SwotAnalysisPage() {
  const [isClient, setIsClient] = useState(false);

  // This ensures the PDF viewer only renders on the client side
  useEffect(() => {
    setIsClient(true);
  }, []);

  return (
    <div className="container mx-auto px-4 py-8">
      <div className="mb-6">
        <Link href="/docs">
          <Button variant="outline" className="mb-4">
            ← Back to Documentation
          </Button>
        </Link>
        <h1 className="text-3xl font-bold mb-2">Project DPE SWOT Analysis</h1>
        <p className="text-gray-600 mb-6">
          An in-depth analysis of Strengths, Weaknesses, Opportunities, and
          Threats for the Project DPE platform.
        </p>
      </div>

      <div className="flex justify-end mb-4">
        <a
          href="/docs/SWOT-Analysis.pdf"
          download="Project DPE-SWOT-Analysis.pdf"
          className="flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded shadow-md"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            className="h-5 w-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={2}
              d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
            />
          </svg>
          Download PDF
        </a>
      </div>

      {isClient ? (
        <div className="w-full h-[calc(100vh-200px)] rounded-lg overflow-hidden">
          <Image
            src="/Project DPE-SWOT-Analysis.jpg"
            alt="SWOT Analysis"
            width={600}
            height={600}
            className="w-full h-full object-contain"
          />
        </div>
      ) : (
        <div className="flex items-center justify-center w-full h-[calc(100vh-200px)] bg-gray-100 rounded-lg">
          Loading viewer...
        </div>
      )}
    </div>
  );
}