import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Zap } from "lucide-react";
import { PageHeader } from "@/components/layout/page-header";

// Mock project data
const MOCK_PROJECT = {
  id: "1",
  name: "AI Proxy",
  emoji: "🤖",
};

interface PageProps {
  params: Promise<{ projectId: string }>;
}

export default async function AutomationPage({ params }: PageProps) {
  const { projectId } = await params;

  return (
    <>
      <PageHeader
        projectId={projectId}
        projectName={MOCK_PROJECT.name}
        projectEmoji={MOCK_PROJECT.emoji}
        pageName="Automation"
      />

      <div className="flex-1 overflow-auto">
        <div className="container max-w-7xl py-6 space-y-6">
          {/* Hero Section */}
          <Card>
            <CardHeader>
              <div className="flex items-center gap-3">
                <div className="p-2 rounded-lg bg-primary/10">
                  <Zap className="h-6 w-6 text-primary" />
                </div>
                <div>
                  <CardTitle>Automation</CardTitle>
                  <CardDescription>
                    Create workflows, set up triggers, and automate repetitive tasks
                  </CardDescription>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <div className="flex flex-col items-center justify-center py-12 text-center">
                <div className="mb-3 rounded-full bg-muted p-4">
                  <Zap className="h-8 w-8 text-muted-foreground" />
                </div>
                <h3 className="font-medium text-lg mb-2">Coming Soon</h3>
                <p className="text-sm text-muted-foreground max-w-md">
                  Build custom workflows to automate testing, deployment, notifications,
                  and other development tasks to accelerate your workflow.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  );
}