import Link from "next/link";

type Subject =
  | {
      label: string;
      description: string;
      href: string;
      disabled: false;
    }
  | {
      label: string;
      description: string;
      disabled: true;
    };

const subjects: Subject[] = [
  {
    label: "숫자 괄호 풀기",
    description: "정수로 이루어진 괄호식을 풀며 부호 변화를 연습합니다.",
    href: "/number-parentheses",
    disabled: false,
  },
  {
    label: "분수 괄호 풀기",
    description: "분수가 들어간 괄호식은 이후 단계에서 추가됩니다.",
    disabled: true,
  },
  {
    label: "실수 괄호 풀기",
    description: "실수가 들어간 괄호식은 이후 단계에서 추가됩니다.",
    disabled: true,
  },
  {
    label: "미지수 괄호 풀기",
    description: "미지수가 들어간 괄호식은 이후 단계에서 추가됩니다.",
    disabled: true,
  },
];

export default function Home() {
  return (
    <main className="flex min-h-screen items-center bg-slate-50 px-6 py-12 text-slate-950">
      <section className="mx-auto flex w-full max-w-3xl flex-col gap-8">
        <div className="space-y-4">
          <p className="text-sm font-semibold text-emerald-700">
            중학교 2학년 수학 - 학습 내용 선택
          </p>
          <h1 className="text-4xl font-bold tracking-normal sm:text-5xl">
            오늘 연습할 괄호 유형을 고르세요
          </h1>
          <p className="max-w-2xl text-lg leading-8 text-slate-700">
            괄호 앞의 음수를 분배할 때 부호가 어떻게 바뀌는지 학습
            내용별로 차근차근 연습합니다.
          </p>
        </div>

        <div className="grid gap-3 sm:grid-cols-2">
          {subjects.map((subject) => {
            if (!subject.disabled) {
              return (
                <Link
                  key={subject.label}
                  href={subject.href}
                  className="flex min-h-32 flex-col justify-between rounded-md bg-white p-5 text-left shadow-sm ring-1 ring-slate-200 transition hover:-translate-y-0.5 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2"
                >
                  <span className="text-xl font-bold text-slate-950">
                    {subject.label}
                  </span>
                  <span className="mt-4 text-sm leading-6 text-slate-600">
                    {subject.description}
                  </span>
                </Link>
              );
            }

            return (
              <button
                key={subject.label}
                type="button"
                disabled
                className="flex min-h-32 cursor-not-allowed flex-col justify-between rounded-md bg-slate-100 p-5 text-left text-slate-400 ring-1 ring-slate-200"
              >
                <span className="text-xl font-bold">{subject.label}</span>
                <span className="mt-4 text-sm leading-6">
                  {subject.description}
                </span>
              </button>
            );
          })}
        </div>

        <div className="border-l-4 border-emerald-700 pl-4 text-sm leading-6 text-slate-600">
          <p>지금은 숫자 괄호 학습만 사용할 수 있습니다.</p>
        </div>
      </section>
    </main>
  );
}