Popover

"use client";

import { Info } from "lucide-react";
import { CruiseButton } from "@/components/cruise/button";
import { CruisePopover } from "@/components/cruise/popover";

export default function PopoverExample() {
  return (
    <div className="flex flex-wrap gap-4">
      <CruisePopover
        title="Delivery fee"
        trigger={
          <CruiseButton variant="secondary">
            <Info aria-hidden="true" />
            How is this worked out?
          </CruiseButton>
        }
        actions={(close) => (
          <CruiseButton variant="secondary" onClick={close}>
            Got it
          </CruiseButton>
        )}
      >
        ₦1,500 within Lagos Island, ₦2,500 to the Mainland. Free on orders over ₦20,000.
      </CruisePopover>
      <CruisePopover sheet title="Order details" trigger={<CruiseButton variant="secondary">Order #1042</CruiseButton>}>
        Classic Celebration Cake × 1, Cupcake Box (6) × 2. Paid by card on 12 October. Out for delivery.
      </CruisePopover>
    </div>
  );
}