import * as React from 'react'
import {CenteredLayer} from '../CenteredLayer'
import {allCornerStyles, triggerStyles, linkStyles} from './helpers'
/**
* @category Props
*/
export interface PopupProps {
// the content of the popup
children: React.ReactNode
// the trigger text or element
trigger?: React.ReactNode
// the corner of the template in which the trigger will be positioned
corner?: keyof typeof allCornerStyles
}
/**
* Popup is a component that renders a popup on top of the template when its trigger is activated by a user..
*
* @remarks
* This component is useful for displaying a "terms" or "privacy policy" link (the text is customisable), which when activated, popups up further details. The styling is designed to automatically fit with any branding out-of-the-box, but everything can be customised if necessary.
*
* The content of the Popup is passed in as the `children` prop. It can be of any length, and will be able to scroll if it is too long for the ad space.
*
* Note that the Popup instance should be passed to the `popup` prop of the {@link Body} component. This will ensure it is positioned correctly within the z-index stack, above the clickTag which would otherwise prevent interaction with the trigger element.
* .
* @param props - the {@link PopupProps}
* @returns the component markup
*
* @category Components
*
* @example
* ```jsx
*
* This is the privacy policy content. It will most likely come from the values.mjs file as a variable.
*
* }
* >
* ... template continues ...
*
* ```
*/
export const Popup = ({children, trigger = `*Terms`, corner = `bottom-left`}: PopupProps) => {
const wrappedTrigger = typeof trigger === `string` ? {trigger} : trigger
const cornerStyles = allCornerStyles[corner] ?? allCornerStyles[`bottom-left`]
return (
<>
{children}
×
)
}
export default Popup