import { useParams } from 'react-router-dom';
import { RegionMap } from '@/components/RegionMap';
import { Button } from '@/components/ui/button';
import { ArrowLeft } from 'lucide-react';
import { useNavigate } from 'react-router-dom';

export const RegionPage = () => {
  const { region } = useParams<{ region: string }>();
  const navigate = useNavigate();
  
  if (!region) {
    return (
      <div className="h-screen w-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 flex items-center justify-center overflow-hidden">
        <div className="text-center">
          <h1 className="text-4xl font-bold text-white mb-4">Region Not Found</h1>
          <p className="text-purple-200 mb-6">The requested region does not exist in our database.</p>
          <Button 
            onClick={() => navigate('/')}
            className="bg-purple-600 hover:bg-purple-700"
          >
            <ArrowLeft className="w-4 h-4 mr-2" />
            Return to Galaxy Map
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="h-screen w-screen bg-gradient-to-br from-slate-900 via-slate-800 to-slate-900 overflow-hidden">
      <RegionMap 
        regionName={region} 
        isWormholeRegion={region === "Wormhole"}
      />
    </div>
  );
};
