// Canary for no-unsanitized-url-attr. Every VIOLATION below must be flagged;
// every OK line must stay clean. A rule that only ever passes proves nothing.

type Row = { proof_url: string | null; nested: { url: string } }

export function Violations({ row }: { row: Row }) {
  return (
    <>
      {/* DO NOT — stored URL straight into href: a javascript: value executes on click */}
      <a href={row.proof_url}>proof</a>
      {/* DO NOT — optional chain is the same sink */}
      <a href={row?.proof_url}>proof</a>
      {/* DO NOT — nested property, same sink */}
      <img src={row.nested.url} />
      {/* DO NOT — form targets are sinks too */}
      <form action={row.nested.url} />
    </>
  )
}

export function Allowed({ row }: { row: Row }) {
  const safe = safeHttpUrl(row.proof_url)
  return (
    <>
      {/* OK — guarded through safeHttpUrl */}
      <a href={safe}>proof</a>
      {/* OK — literal, not data */}
      <a href="/requests">board</a>
      {/* OK — "action" here is a prop on a capitalized custom component
          carrying a data object, not a form's URL-navigation attribute on
          a real DOM element; no browser sink exists to inject into */}
      <ActionConfirmDialog action={row.nested} />
    </>
  )
}

declare function safeHttpUrl(value: string | null | undefined): string | undefined
declare function ActionConfirmDialog(props: { action: unknown }): JSX.Element