/**
 * Notice that the Customization panel is editing a specific preview viewport.
 */
import { __ } from '@wordpress/i18n';

const VIEWPORTS = {
	desktop: {
		icon: 'desktop',
		label: __( 'Desktop', 'joc-blockora-morph' ),
		detail: __( 'Base styles for large screens.', 'joc-blockora-morph' ),
	},
	tablet: {
		icon: 'tablet',
		label: __( 'Tablet', 'joc-blockora-morph' ),
		detail: __( 'Overrides Desktop below 1024px.', 'joc-blockora-morph' ),
	},
	mobile: {
		icon: 'smartphone',
		label: __( 'Mobile', 'joc-blockora-morph' ),
		detail: __( 'Overrides Tablet & Desktop below 480px.', 'joc-blockora-morph' ),
	},
};

/**
 * @param {object} props
 * @param {'desktop'|'tablet'|'mobile'} props.viewport
 */
export default function ViewportEditBanner( { viewport = 'desktop' } ) {
	const meta = VIEWPORTS[ viewport ] || VIEWPORTS.desktop;

	return (
		<div
			className={ `bm-viewport-banner bm-viewport-banner--${ viewport }` }
			role="status"
			aria-live="polite"
		>
			<span className="bm-viewport-banner__icon" aria-hidden="true">
				<span className={ `dashicons dashicons-${ meta.icon }` } />
			</span>
			<div className="bm-viewport-banner__copy">
				<p className="bm-viewport-banner__eyebrow">
					{ __( 'Now editing', 'joc-blockora-morph' ) }
				</p>
				<p className="bm-viewport-banner__title">{ meta.label }</p>
				<p className="bm-viewport-banner__detail">{ meta.detail }</p>
			</div>
		</div>
	);
}
