import { consume } from '@lit/context';
import { css, html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import type { PromosContext } from '../../shared/contexts/promos.js';
import { promosContext } from '../../shared/contexts/promos.js';
import '../../shared/components/promo.js';

@customElement('gl-promo-banner')
export class GlPromoBanner extends LitElement {
	static override styles = [
		css`
			:host {
				display: block;
			}

			.promo-banner {
				margin-bottom: var(--gl-space-10);
				text-align: center;
			}

			.promo-banner--eyebrow {
				margin-bottom: var(--gl-space-2);
				color: var(--color-foreground--50);
			}

			.promo-banner:has(gl-promo:not([has-promo])) {
				display: none;
			}
		`,
	];

	@consume({ context: promosContext })
	private promos!: PromosContext;

	override render(): unknown {
		return html`
			<gl-promo
				.promoPromise=${this.promos.getApplicablePromo(undefined, 'home')}
				.source="${{ source: 'home' } as const}"
				class="promo-banner promo-banner--eyebrow"
				id="promo"
				type="link"
			></gl-promo>
		`;
	}
}
