"use client";

import BackgroundWrapper from "@/components/BackgroundWrapper";
import Header from "@/components/Header";
import React from "react";
import Image from "next/image";
import { useRouter } from "next/navigation";

const CategoriesPage = () => {
  const router = useRouter();

  return (
    <BackgroundWrapper>
      <main>
        <Header displayTabTitle="Categories" />
        <div className="grid grid-cols-2 gap-4 pt-6 mx-4">
          <button
            onClick={() => router.push("/categories/topics")}
            className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
          >
            <Image
              src="/images/icons/topic-test.png"
              alt="Topic Test"
              width={85}
              height={85}
            />
            <span className="font-medium text-[#113768]">Topic Test</span>
          </button>

          <button
            onClick={() => router.push("/categories/mocks")}
            className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
          >
            <Image
              src="/images/icons/mock-test.png"
              alt="Mock Test"
              width={85}
              height={85}
            />
            <span className="font-medium text-[#113768]">Mock Test</span>
          </button>

          <button
            disabled
            className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
          >
            <Image
              src="/images/icons/past-paper.png"
              alt="Past Papers"
              width={68}
              height={68}
              className="opacity-50"
            />
            <span className="font-medium text-[#113768]/50">Past Papers</span>
          </button>

          <button
            onClick={() => router.push("/categories/subjects")}
            className="flex flex-col justify-center items-center border-[1px] border-blue-200 aspect-square rounded-3xl gap-2 bg-white"
          >
            <Image
              src="/images/icons/subject-test.png"
              alt="Subject Test"
              width={80}
              height={80}
            />
            <span className="font-medium text-[#113768]">Subject Test</span>
          </button>
        </div>
      </main>
    </BackgroundWrapper>
  );
};

export default CategoriesPage;