"use client";

import { useEffect } from "react";
import { useRouter } from "next/navigation";

interface StateScreenProps {
  type: "success" | "error" | "info" | "warning" | "empty";
  message: string;
  redirectUrl?: string;
  delay?: number;
}

export function StateScreen({
  type,
  message,
  redirectUrl,
  delay = 3000,
}: StateScreenProps) {
  const router = useRouter();

  useEffect(() => {
    if (redirectUrl) {
      const timer = setTimeout(() => {
        router.push(redirectUrl);
      }, delay);

      return () => clearTimeout(timer);
    }
  }, [redirectUrl, delay, router]);

  const getStyles = () => {
    switch (type) {
      case "success":
        return "bg-green-100 text-green-800";
      case "error":
        return "bg-red-100 text-red-800";
      case "info":
        return "bg-blue-100 text-blue-800";
      case "warning":
        return "bg-yellow-100 text-yellow-800";
      case "empty":
        return "bg-gray-100 text-gray-800";
      default:
        return "";
    }
  };

  const getTitle = () => {
    switch (type) {
      case "success":
        return "Success!";
      case "error":
        return "Error!";
      case "info":
        return "Info";
      case "warning":
        return "Warning!";
      case "empty":
        return "No Content";
      default:
        return "";
    }
  };

  return (
    <div
      className={`flex flex-col items-center justify-center h-screen ${getStyles()}`}
    >
      <h1 className="text-2xl font-bold">{getTitle()}</h1>
      <p className="text-sm text-gray-600">{message}</p>
      {redirectUrl && <p className="text-xs mt-2">Redirecting...</p>}
    </div>
  );
}