import React from 'react'
import { TooltipToggle } from '@financial-times/o3-tooltip/cjs'
import type { Article } from '@financial-times/cp-content-pipeline-client'

const DISCLAIMER_MESSAGES: Record<
  NonNullable<Article['disclaimerType'] | 'fallback'>,
  (name: string) => string
> = {
  'co-created-content': (name) =>
    `This content was paid for by ${name} and produced in partnership with the Financial Times Commercial department`,
  'client-supplied-content': (name) =>
    `This content was paid for and produced by ${name}`,
  'ft-studios-risky': (name) =>
    `This advertisement has been produced by the Commercial department of the Financial Times on behalf of ${name}`,
  auditor: (name) =>
    `This content was paid for and produced by ${name} with the Financial Times Commercial department`,
  fallback: (name) =>
    `This content was paid for by ${name} and produced in partnership with the Financial Times Commercial department`,
}

const PartnerContentHeader = ({
  name = 'the sponsor',
  disclaimerType,
}: {
  name: string
  disclaimerType?: Article['disclaimerType']
}) => {
  return (
    <div className="partner-content-header" data-o3-brand="core">
      <div className="partner-content-header__content">
        <div className="partner-content-header__client">{name}</div>
        <div className="partner-content-header__title">
          <p>Partner Content</p>
          <TooltipToggle
            placement="bottom"
            content={DISCLAIMER_MESSAGES[disclaimerType ?? 'fallback'](name)}
            infoLabel="More information on Partner Content"
          />
        </div>
      </div>
    </div>
  )
}

export default PartnerContentHeader