Shipment Status Card

import { ShipmentStatusCard } from "@/components/ui/shipment-status-card";
import { Clock, Truck } from "lucide-react";

export default function ShipmentStatusCardDemo() {
  return (
    <div className="flex h-full min-h-[500px] w-full items-center justify-center bg-background p-4">
      <ShipmentStatusCard
        imageUrl="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-vB3yCpbqsZG8AszLPHliTtHLMv24hJ.png&w=1000&q=75"
        imageAlt="A package on a conveyor belt"
        title="Track Your Delivery"
        description="Monitor your shipment status in real-time. Stay informed about your delivery's progress every step of the way."
        buttonText="View Status"
        statusText="Your delivery is on its way!"
        statusIcon={<Truck className="h-4 w-4" />}
        timeIcon={<Clock className="h-4 w-4" />}
        onButtonClick={() => alert("Button clicked!")}
      />
    </div>
  );
}