import React from "react";
import { useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ArrowRight, Sparkles } from "lucide-react";

export default function SmartScheduler() {
  const navigate = useNavigate();

  return (
    <div className="p-4 md:p-8 bg-slate-50 min-h-screen flex items-center justify-center">
      <Card className="max-w-2xl w-full">
        <CardContent className="p-12 text-center">
          <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-6">
            <Sparkles className="w-8 h-8 text-white" />
          </div>
          <h1 className="text-3xl font-bold text-slate-900 mb-4">
            Smart Scheduling is Now Part of Orders
          </h1>
          <p className="text-lg text-slate-600 mb-8">
            All smart assignment, automation, and scheduling features have been unified into the main Order Management view for a consistent experience.
          </p>
          <Button
            size="lg"
            onClick={() => navigate(createPageUrl("Events"))}
            className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
          >
            Go to Order Management
            <ArrowRight className="w-5 h-5 ml-2" />
          </Button>
        </CardContent>
      </Card>
    </div>
  );
}