import React from 'react'

import type { CatalogEntry } from '../../data/addonCatalog'

/** The `id` an AddonTeaserTile's `aria-controls` points at for a given component. */
export const addonNoteId = ( component: string ): string => `addon-note-${ component }`

/**
 * The note for the currently open AddonTeaserTile in a palette — rendered
 * once per palette (not once per tile), in normal document flow directly
 * below the item box of the section containing the open teaser, so it
 * never overlaps the next row of tiles. See `useAddonTeaserNote`
 * (src/admin/hooks/AddonTeaserNote) for the open/close state this backs.
 */
export default function AddonTeaserNote( { entry }: { entry: CatalogEntry } ) {
  return (
    <div
      id={ addonNoteId( entry.component ) }
      data-addon-note={ entry.component }
      className="components-panel__addon-note"
    >
      { entry.label } is available with the { entry.addonName } add-on.{ ' ' }
      <a href={ entry.url } target="_blank" rel="noopener noreferrer">Learn more</a>
    </div>
  )
}