"use client";

import Link from "next/link";
import { PRIMARY_COLOR } from "@/lib/common";

interface ErrorPageProps {
  code: number;
  title: string;
  message: string;
  actionLabel?: string;
  actionLink?: string;
}

const ERROR_COLORS = {
  404: PRIMARY_COLOR,
  500: "#FFA626",
  default: PRIMARY_COLOR,
} as const;

export default function ErrorPage({
  code,
  title,
  message,
  actionLabel = "Go Home",
  actionLink = "/",
}: ErrorPageProps) {
  const isError500 = code === 500;
  const codeColor = ERROR_COLORS[code as keyof typeof ERROR_COLORS] || ERROR_COLORS.default;

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100 p-6">
      {/* Animated code */}
      <h1
        className={`text-[10rem] sm:text-[15rem] font-extrabold mb-4`}
        style={{ color: codeColor }}
      >
        {code}
      </h1>

      {/* Title */}
      <p
        className="text-3xl sm:text-4xl font-semibold mb-2 animate-bounce"
        style={{ color: isError500 ? "#FFA626" : "#428B4D" }}
      >
        {title}
      </p>

      {/* Message */}
      <p className="text-lg text-gray-700 mb-6 text-center max-w-md">{message}</p>

      {/* Action button */}
      <Link
        href={actionLink}
        className="px-6 py-3 rounded-lg text-white font-semibold shadow-md transition transform hover:scale-105"
        style={{
          backgroundColor: isError500 ? "#FFA626" : PRIMARY_COLOR,
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.backgroundColor = isError500 ? PRIMARY_COLOR : "#357a3f";
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.backgroundColor = isError500 ? "#FFA626" : PRIMARY_COLOR;
        }}
      >
        {actionLabel}
      </Link>
    </div>
  );
}