import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Box, Plus } from "lucide-react";

export default async function FeaturesPage({
  params,
}: {
  params: { projectId: string };
}) {
  return (
    <div className="flex h-full flex-col">
      {/* Page Header */}
      <div className="border-b bg-card/50 px-6 py-4">
        <div className="flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold">Features</h1>
            <p className="text-sm text-muted-foreground">
              Plan and track your product features
            </p>
          </div>
          <Button>
            <Plus className="mr-2 h-4 w-4" />
            New Feature
          </Button>
        </div>
      </div>

      {/* Content */}
      <div className="flex-1 overflow-auto p-6">
        <div className="mx-auto max-w-6xl">
          <Card>
            <CardHeader>
              <CardTitle>Feature List</CardTitle>
              <CardDescription>
                Features with user stories and acceptance criteria
              </CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-col items-center justify-center py-12">
                <div className="mb-4 rounded-full bg-muted p-3">
                  <Box className="h-6 w-6 text-muted-foreground" />
                </div>
                <h3 className="text-lg font-medium mb-2">No features yet</h3>
                <p className="text-sm text-center text-muted-foreground max-w-sm mb-4">
                  Start planning your features with user stories and track their progress
                </p>
                <Button>
                  <Plus className="mr-2 h-4 w-4" />
                  Create First Feature
                </Button>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </div>
  );
}