"use client"

import * as React from "react"
import { Lightbulb } from "lucide-react"

import { cn } from "../../lib/utils"
import { Alert, AlertDescription } from "./alert"

/**
 * `Tip` is the replacement for `@wordpress/components`' `Tip` - **1 import**, two usages in
 * `QuestionnairePage`.
 *
 * BUILT ON `ui/alert` RATHER THAN BEING A NEW SURFACE, because that is already the app's callout box.
 * WordPress's Tip is a lightbulb icon and a paragraph, which is the Alert layout exactly.
 *
 * IT IS STILL A COMPONENT AND NOT A CALL-SITE REWRITE for the usual reason: `<Tip>text</Tip>` stays a
 * one-line import swap, where expanding it into an Alert with an icon and a description would be a
 * different edit in every file that ever uses one.
 *
 * `role="note"`, deliberately, overriding what Alert would pick. Alert's default variant maps to
 * `role="status"`, an ARIA live region - correct for something that just happened, wrong for static
 * help text that would then be read out on every mount.
 */

function Tip({ className, children, ...props }: React.ComponentProps<"div">) {
  return (
    <Alert data-slot="tip" role="note" className={cn(className)} {...props}>
      <Lightbulb aria-hidden="true" />
      <AlertDescription>{children}</AlertDescription>
    </Alert>
  )
}

export { Tip }