Empty state

import { SearchX, ShoppingBag, WifiOff } from "lucide-react";
import { CruiseButton } from "@/components/cruise/button";
import { CruiseEmptyState } from "@/components/cruise/empty-state";

export default function EmptyStateExample() {
  return (
    <div className="grid gap-6 md:grid-cols-3">
      <div className="brutal brutal-static">
        <CruiseEmptyState
          icon={<ShoppingBag strokeWidth={2.5} />}
          title="No orders yet"
          description="When you buy something, it shows up here."
          action={<CruiseButton>Start shopping</CruiseButton>}
          headingLevel={3}
        />
      </div>
      <div className="brutal brutal-static">
        <CruiseEmptyState
          icon={<SearchX strokeWidth={2.5} />}
          title="No results for “agbada”"
          description="Check the spelling or try a shorter word."
          action={<CruiseButton variant="secondary">Clear search</CruiseButton>}
          headingLevel={3}
        />
      </div>
      <div className="brutal brutal-static">
        <CruiseEmptyState
          icon={<WifiOff strokeWidth={2.5} />}
          title="You're offline"
          description="We'll load your orders when you're back online."
          action={<CruiseButton variant="secondary">Try again</CruiseButton>}
          secondary={<a href="#help">Get help</a>}
          headingLevel={3}
        />
      </div>
    </div>
  );
}