import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { AlertTriangle, Info } from "lucide-react"

function Alert5() {
  return (
    <div className="flex flex-col gap-4 max-w-[500px]">
      <Alert>
        <Info className="size-4" />
        <AlertTitle>You have a new invoice due.</AlertTitle>
        <AlertDescription>
          Do not miss out on the opportunity to pay your invoice. It&apos;s due
          in 3 days.
        </AlertDescription>
        <a
          href="#"
          className="mt-2.5 inline-flex text-sm font-medium underline"
        >
          Pay Now
        </a>
      </Alert>
      <Alert variant="destructive">
        <AlertTriangle className="size-4" />
        <AlertTitle>Something went wrong with your submission.</AlertTitle>
        <AlertDescription>
          Please check your connection and try again. If the problem persists,
          contact support.
        </AlertDescription>
        <a
          href="#"
          className="mt-2.5 inline-flex text-sm font-medium text-destructive underline"
        >
          Retry
        </a>
      </Alert>
    </div>
  )
}
export { Alert5 }