import { useLocation, useNavigate } from 'react-router-dom'

export default function Perdu() {
  const navigate = useNavigate()
  const location = useLocation()
  const message = location.state?.message

  return (
    <div className="min-h-screen bg-gray-50 flex flex-col items-center justify-center px-8 max-w-sm mx-auto text-center">

      <div className="w-20 h-20 bg-gray-200 rounded-full flex items-center justify-center mb-6">
        <svg className="w-10 h-10 text-gray-500" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>

      <h1 className="text-3xl font-bold italic font-serif text-[#006B6B] mb-2">
        Réessayer la prochaine fois
      </h1>

      <p className="text-gray-500 text-sm mb-2">
        {message || 'Ce code est invalide ou a déjà été utilisé.'}
      </p>

      <p className="text-gray-500 text-xs mb-8">
        Vérifiez le code présent sur votre ticket et réessayez.
      </p>

      <button
        onClick={() => navigate('/saisir-code-unique')}
        className="w-full bg-[#006B6B] hover:bg-[#005959] text-white font-medium py-3 rounded-lg transition-colors"
      >
        Réessayer
      </button>
    </div>
  )
}