import { ReactNode } from 'react'
import './styles.css'

type Link = {
  text: string
  href: string
}

interface PolicyProps {
  links: Link[]
  children: string
  sizing?: 'small' | 'medium' | 'large'
}

const sizes = {
  small: 'policy--small',
  medium: 'policy--medium',
  large: 'policy--large',
}

function Policy({ links, children, sizing = 'small' }: PolicyProps): JSX.Element {
  const createLinkedContent = (sentence: string): ReactNode[] => {
    const pattern = links.map(link => `(${link.text})`).join('|');
    const regex = new RegExp(pattern, 'g');
    return sentence.split(regex).map((part, idx) => {
      const link = links.find(({ text }) => text === part);

      if (!link) return part

      return (
        <a key={`${link.text}-${idx}`} href={link.href} target="_blank" rel="noreferrer nofollow">
          {link.text}
        </a>
      );
    });
  }

  return (
    <div className={`policy ${sizes[sizing]}`}>
      <p>{createLinkedContent(children)}</p>
    </div>
  )
}

export default Policy