"use client";

import React from "react";
import { useRouter } from "next/navigation";
import Header from "@/components/Header";
import BackgroundWrapper from "@/components/BackgroundWrapper";
import { v4 as uuidv4 } from "uuid";

const units = [
  {
    id: uuidv4(),
    name: "Science",
    rating: 8,
  },
  {
    id: uuidv4(),
    name: "Business Studies",
    rating: 8,
  },
  {
    id: uuidv4(),
    name: "Humanities",
    rating: 9,
  },
];

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

  const handleUnitPress = (unit: {
    id: string;
    name: string;
    rating?: number;
  }) => {
    router.push(`/paper?name=${encodeURIComponent(unit.name)}`);
  };

  return (
    <BackgroundWrapper>
      <div className="flex flex-col min-h-screen">
        <Header displayTabTitle="Subjects" />
        <div className="flex-1">
          <div className="overflow-y-auto">
            <div className="border border-blue-200 flex flex-col gap-4 rounded-3xl p-4 mx-10 mt-10">
              {units ? (
                units.map((unit) => (
                  <button
                    key={unit.id}
                    onClick={() => handleUnitPress(unit)}
                    className="border-2 border-blue-300 py-4 rounded-xl px-6 gap-2 block w-full text-left hover:bg-blue-50 transition-colors duration-200"
                  >
                    <p className="text-lg font-medium">{unit.name}</p>
                    <p className="text-sm">Rating: {unit.rating} / 10</p>
                  </button>
                ))
              ) : (
                <div className="flex flex-col items-center py-8">
                  <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mb-4"></div>
                  <p className="font-bold text-2xl text-center">Loading...</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
      {/* <CustomBackHandler fallbackRoute="home" useCustomHandler={false} /> */}
    </BackgroundWrapper>
  );
};

export default Unit;