import { LayoutDashboard } from "lucide-react";

export function EmptyState() {
  return (
    <div className="flex flex-1 flex-col items-center justify-center gap-3 p-12 text-center">
      <div className="flex size-16 items-center justify-center rounded-full bg-primary/10 text-primary">
        <LayoutDashboard className="size-8" />
      </div>
      <h2 className="text-lg font-semibold">Your board is empty</h2>
      <p className="max-w-sm text-sm text-muted-foreground">
        Create your first category to get started — categories are the lanes that hold your
        groups of notes and to-dos.
      </p>
    </div>
  );
}