"use client";
import Link from "next/link";

export default function ErrorPage({ errorMessage }) {
  return (
    <div style={styles.container}>
      <h1 style={styles.title}>Something Went Wrong</h1>
      <p style={styles.message}>{errorMessage}</p>
      <Link href="/" style={styles.link}>
        Go Home
      </Link>
    </div>
  );
}

const styles = {
  container: {
    position: 'absolute',
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    height: '100dvh',
    width:'100dvw',
    top:'0',
    textAlign: 'center',
    color: 'white',
    padding: '20px',
    overflow: 'hidden',
  },
  overlay: {
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    background: 'url("/404_bg.jpg") no-repeat center center/cover',
    filter: "blur(5px)",
    zIndex: -1, // Sends the overlay behind the text
  },
  title: {
    fontSize: "3rem",
    fontWeight: "bold",
    color: "#ff4747",
  },
  message: {
    fontSize: "1.5rem",
    margin: "20px 0",
  },
  link: {
    marginTop: "20px",
    padding: "12px 20px",
    backgroundColor: "var(--bg-primary)", // Semi-transparent red
    color: "white",
    textDecoration: "none",
    borderRadius: "5px",
    border: "2px solid var(--primary-special-color)",
    transition: "background-color 0.3s ease",
    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.5)",
  },
};