'use client';

import { CheckCircle } from 'lucide-react';

export default function SuccessScreen({ name }: { name: string }) {
  return (
    <div className="text-center py-10 px-4">
      <div className="w-16 h-16 bg-emerald-50 border border-emerald-100 rounded-full flex items-center justify-center mx-auto mb-5">
        <CheckCircle className="w-8 h-8 text-emerald-500" />
      </div>
      <h2 className="text-2xl font-bold text-gray-900 mb-2">
        You&apos;re in, {name}!
      </h2>
      <p className="text-gray-500 text-sm mb-6 max-w-xs mx-auto leading-relaxed">
        Your application for{' '}
        <span className="font-semibold text-orange-600">Ignite-100</span> has been
        received. Expect a response within 48 hours.
      </p>
      <div className="bg-gray-900 border text-center border-orange-100 rounded-xl p-5 max-w-md mx-auto space-y-2">
        <p className="text-xs font-semibold text-white uppercase tracking-wide mb-3">
          What happens next
        </p>
        {[
          'Check your email for confirmation',
          'Join our WhatsApp community',
          'Attend the orientation session',
        ].map((item) => (
          <div key={item} className="flex items-center justify-center gap-2">
            <span className="w-4 h-4 rounded-full bg-orange-500 flex items-center justify-center flex-shrink-0">
              <CheckCircle className="w-2.5 h-2.5 text-green-100" />
            </span>
            <p className="text-xs text-gray-100">{item}</p>
          </div>
        ))}
      </div>
    </div>
  );
}