import { isExternalHref } from '../../site-routes'
import { HyperTwistButtonAnchor, HyperTwistButtonLink } from './HyperTwistButton'

type OperationalStatusSection = {
  title: string
  items: readonly string[]
}

type OperationalStatusAction = {
  label: string
  to: string
}

export function OperationalStatusCallout({
  badge,
  title,
  summary,
  sections = [],
  actions = [],
}: {
  badge: string
  title: string
  summary: string
  sections?: readonly OperationalStatusSection[]
  actions?: readonly OperationalStatusAction[]
}) {
  const visibleSections = sections.filter((section) => section.items.length > 0)

  return (
    <div className="callout">
      <p className="status-pill status-pill--info">{badge}</p>
      <p><strong>{title}</strong> {summary}</p>
      {visibleSections.map((section) => (
        <div key={section.title} className="top-gap">
          <p><strong>{section.title}</strong></p>
          <ul className="list top-gap">
            {section.items.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </div>
      ))}
      {actions.length > 0 ? (
        <div className="button-row top-gap">
          {actions.map((action) => (
            isExternalHref(action.to) ? (
              <HyperTwistButtonAnchor
                key={action.label}
                href={action.to}
                target="_blank"
                rel="noreferrer"
                tone="ghost"
              >
                {action.label}
              </HyperTwistButtonAnchor>
            ) : (
              <HyperTwistButtonLink key={action.label} tone="ghost" to={action.to}>
                {action.label}
              </HyperTwistButtonLink>
            )
          ))}
        </div>
      ) : null}
    </div>
  )
}
