import { Link } from 'react-router-dom'

export function InvalidTokenPage() {
  return (
    <div className="registration-form container mt-5 mb-5">
      <div
        className="bg-white p-5 rounded-5 shadow registration-form container"
        style={{ maxWidth: 600, width: '100%' }}
      >
        <div className="text-center mb-4">
          <Link to="/">
            <img
              src="/alrahma_logo.png"
              alt="Al Rahma Sunday School"
              style={{ width: 180, height: 120 }}
            />
          </Link>
        </div>

        <h3 className="text-center text-danger" style={{ fontFamily: 'Arial, sans-serif' }}>
          Invalid or Expired Token
        </h3>
        <p className="text-center mb-1">The link you used is either:</p>
        <ul className="list-unstyled text-center mb-3">
          <li>❌ Invalid</li>
          <li>⏳ Expired</li>
          <li>✅ Already used</li>
        </ul>
        <p className="text-center text-secondary mb-4">Please try registering again.</p>
        <div className="mb-2 d-grid">
          <Link to="/register" className="btn btn-success item">
            Register a New Account
          </Link>
        </div>
      </div>
    </div>
  )
}
