import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Server } 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 DeploymentPage({ params }: PageProps) {
  const { projectId } = await params;

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

      <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">
                  <Server className="h-6 w-6 text-primary" />
                </div>
                <div>
                  <CardTitle>Deployment</CardTitle>
                  <CardDescription>
                    Manage deployments, monitor environments, and track releases
                  </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">
                  <Server 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">
                  Connect your hosting platforms to manage deployments, view logs,
                  and monitor your application&apos;s health across all environments.
                </p>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </>
  );
}