Delayed

import {
  Alert,
  AlertDescription,
  AlertTitle,
  Avatar,
  AvatarFallback,
  Badge,
  Button,
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
  Separator,
  Timeline,
  TimelineContent,
  TimelineDescription,
  TimelineDot,
  TimelineItem,
  TimelineTime,
  TimelineTitle,
} from "@cronus-ui/ui";
import { Check, Clock, MapPin, MessageCircle, Package, TriangleAlert } from "lucide-react";

export function OrderDelayedBlock() {
  return (
    <Card
      role="region"
      aria-label="Order tracking"
      className="mx-auto w-full max-w-2xl gap-0 shadow-md"
    >
      <CardHeader>
        <CardTitle className="font-display text-lg">Order #CD-58124</CardTitle>
        <p className="col-span-full text-sm text-fg-secondary">
          Placed Jul 5, 2026 · 2 items · $94.50
        </p>
        <div className="col-start-2 row-span-2 row-start-1 self-start justify-self-end">
          <Badge variant="warning">Delayed</Badge>
        </div>
      </CardHeader>
      <CardContent className="flex flex-col gap-6 pt-2">
        <Alert variant="warning">
          <TriangleAlert aria-hidden="true" />
          <AlertTitle>Your delivery is running late</AlertTitle>
          <AlertDescription>
            A weather hold at the Memphis hub added 2–3 days. New estimated delivery: Sunday,
            Jul 19. We&apos;ll email you as soon as it moves.
          </AlertDescription>
        </Alert>

        <Timeline>
          <TimelineItem>
            <TimelineDot tone="success" icon={<Check />} />
            <TimelineContent>
              <TimelineTitle>Order confirmed</TimelineTitle>
              <TimelineTime>Jul 5, 3:26 PM</TimelineTime>
              <TimelineDescription>Payment received and order accepted.</TimelineDescription>
            </TimelineContent>
          </TimelineItem>
          <TimelineItem>
            <TimelineDot tone="success" icon={<Package />} />
            <TimelineContent>
              <TimelineTitle>Packed and shipped</TimelineTitle>
              <TimelineTime>Jul 6, 10:44 AM</TimelineTime>
              <TimelineDescription>
                Handed to DHL Express at the Aurora warehouse.
              </TimelineDescription>
            </TimelineContent>
          </TimelineItem>
          <TimelineItem>
            <TimelineDot tone="warning" icon={<Clock />} />
            <TimelineContent>
              <TimelineTitle>Held at sorting hub</TimelineTitle>
              <TimelineTime>Jul 12, 6:40 AM</TimelineTime>
              <TimelineDescription>
                Severe weather in Memphis is delaying outbound trucks.
              </TimelineDescription>
            </TimelineContent>
          </TimelineItem>
          <TimelineItem>
            <TimelineDot icon={<MapPin />} />
            <TimelineContent>
              <TimelineTitle>Delivered</TimelineTitle>
              <TimelineTime>New estimate Jul 19</TimelineTime>
              <TimelineDescription>We&apos;ll notify you of any further changes.</TimelineDescription>
            </TimelineContent>
          </TimelineItem>
        </Timeline>
      </CardContent>
      <Separator className="my-4" />
      <CardFooter className="flex-wrap items-center justify-between gap-3 pb-6">
        <div className="flex items-center gap-3">
          <Avatar>
            <AvatarFallback>DH</AvatarFallback>
          </Avatar>
          <div className="flex flex-col">
            <span className="text-sm font-medium text-fg">DHL Express</span>
            <span className="text-xs text-fg-tertiary">Tracking 1Z 999 AA1 0198 2276</span>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <Button variant="ghost" size="sm">
            Request a refund
          </Button>
          <Button variant="outline" size="sm">
            <MessageCircle className="size-3.5" aria-hidden="true" />
            Contact support
          </Button>
        </div>
      </CardFooter>
    </Card>
  );
}