import { Icons } from "@turbostarter/ui-web/icons";
import { CreateDiagramDialog } from "./CreateDiagramDialog";
import { Button } from "@turbostarter/ui-web/button";

export function EmptyDiagrams() {
  return (
    <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-12 text-center">
      <Icons.LayoutDashboard className="h-12 w-12 text-muted-foreground/50" />
      <h3 className="mt-4 text-lg font-semibold">No diagrams yet</h3>
      <p className="mt-2 text-sm text-muted-foreground max-w-sm">
        Create your first diagram to start designing system architectures, workflows, and more with AI assistance.
      </p>
      <CreateDiagramDialog>
        <Button className="mt-6">
          <Icons.Plus className="mr-2 h-4 w-4" />
          Create your first diagram
        </Button>
      </CreateDiagramDialog>
    </div>
  );
}
