'use client';
import { Button } from '@dndbeyond/ttui/components/Button';
import clsx from 'clsx';
import { forwardRef } from 'react';
import { getItemAttributes, getSubElementAttributes } from '../../bi/helpers';
import type { Meta, Title as PromoCarouselAdapterSchema } from '../../schemas/promotion-message-schema';
import type { LanguageType, TopNavigationMessages } from '../../types';
import { AmplienceComponent } from '../AmplienceComponent';
import styles from './TopNavigation.module.css';

type TopNavigationType = {
  className?: string;
  promoSlotData?: {
    content: PromoCarouselAdapterSchema;
    _meta: Meta;
  };
  messages: TopNavigationMessages;
  locale: LanguageType;
  onDismissBanner?: () => void;
};

export const TopNavigation = forwardRef<HTMLDivElement, TopNavigationType>(
  ({ className, promoSlotData, messages, locale, onDismissBanner }, ref) => {
    return (
      <div
        ref={ref}
        className={clsx(styles.promoBannerWrapper, className)}
        data-testid="topNavigation-wrapper"
        {...getSubElementAttributes('Top Navigation', 'main tile', undefined)}
      >
        <div className={styles.promoBanner}>
          <div></div>
          <div>{promoSlotData && <AmplienceComponent item={promoSlotData} locale={locale} />}</div>
          {!!onDismissBanner && (
            <Button
              variant="outline"
              color="primary"
              size="x-small"
              className={styles.dismissButton}
              onClick={onDismissBanner}
              data-testid="dismiss-button"
              {...getItemAttributes('Dismiss Promo Banner', 'button', 'close', undefined, undefined)}
            >
              {messages.dismiss}
            </Button>
          )}
        </div>
      </div>
    );
  },
);

TopNavigation.displayName = 'TopNavigation';
