import { makeStyles, mergeClasses, tokens, shorthands } from '@fluentui/react-components'
import { RADIUS } from './tokens'
import { useTextStyles } from './text'

/**
 * One inline notification bar (UI19). The DownloadBar's copied-link suggestion,
 * its channel/playlist nudge, its duplicate warning, and the Library's copied-link
 * suggestion had each hand-rolled the same tinted row (leading icon + flex-grow
 * text + trailing actions). This is that row, once: a leading `icon`, `children`
 * content that truncates by default (`wrap` to let it flow onto multiple lines),
 * and a trailing `actions` slot.
 *
 * `tone` picks the semantic tint — `brand` for suggestions/nudges, `warning` for
 * the duplicate caution — matching the former per-component colors exactly.
 */
export type BannerTone = 'brand' | 'warning'

const useStyles = makeStyles({
  root: {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    padding: '8px 8px 8px 12px',
    ...shorthands.borderRadius(RADIUS.surface)
  },
  brand: {
    backgroundColor: tokens.colorBrandBackground2,
    color: tokens.colorBrandForeground2
  },
  warning: {
    backgroundColor: tokens.colorStatusWarningBackground1,
    color: tokens.colorStatusWarningForeground1
  },
  content: {
    flexGrow: 1,
    minWidth: 0
  }
})

export function Banner({
  icon,
  tone = 'brand',
  wrap = false,
  children,
  actions
}: {
  icon?: React.ReactNode
  tone?: BannerTone
  /** Let the content wrap onto multiple lines instead of truncating (the channel nudge). */
  wrap?: boolean
  children: React.ReactNode
  actions?: React.ReactNode
}): React.JSX.Element {
  const styles = useStyles()
  const text = useTextStyles()
  return (
    <div className={mergeClasses(styles.root, styles[tone])}>
      {icon}
      <div className={mergeClasses(styles.content, !wrap && text.truncate)}>{children}</div>
      {actions}
    </div>
  )
}
