import { LayoutDashboard } from "lucide-react";

export function EmptyState() {
  return (
    <div
      data-board-chrome=""
      className="flex flex-1 flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-border/80 p-10 text-center"
    >
      <div className="flex size-14 items-center justify-center rounded-2xl bg-primary/10 text-primary">
        <LayoutDashboard className="size-7" />
      </div>
      <div className="space-y-1">
        <h2 className="font-heading text-lg font-semibold">Your board is empty</h2>
        <p className="mx-auto max-w-xs text-sm leading-relaxed text-muted-foreground">
          Lanes hold your groups of notes and to-dos. Add your first lane to
          start organizing.
        </p>
      </div>
    </div>
  );
}