import * as React from "react"
import { AlertCircle, Info } from "lucide-react"
import { Alert, AlertDescription, AlertTitle } from "@/registry/ui/alert"

export default function AlertDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-4">
      <Alert>
        <Info className="size-4" />
        <AlertTitle>Information</AlertTitle>
        <AlertDescription>
          This is an informational alert. Use it to surface helpful context to the
          user without blocking their workflow.
        </AlertDescription>
      </Alert>

      <Alert variant="destructive">
        <AlertCircle className="size-4" />
        <AlertTitle>Error</AlertTitle>
        <AlertDescription>
          Something went wrong. Please review your input and try again.
        </AlertDescription>
      </Alert>
    </div>
  )
}