import React, { FC } from 'react';
import styles from './BreakpointTitles.module.scss';

interface BreakpointTitleProps {
  title: string;
  image: string;
  modifier: 'speakers' | 'tickets' | 'travel' | 'getInvolved' | 'highlights';
}

export const BreakpointTitle: FC<BreakpointTitleProps> = ({ title, image, modifier }) => {
  const modifierClasses = {
    speakers: styles['breakpoint-title__speakers'],
    tickets: styles['breakpoint-title__tickets'],
    travel: styles['breakpoint-title__travel'],
    getInvolved: styles['breakpoint-title__get-involved'],
    highlights: styles['breakpoint-title__highlights'],
  };

  // Use the mapping to get the correct class name
  let modifierClass = modifier ? modifierClasses[modifier] : '';

  return (
    <div className="tw-text-center tw-mx-auto tw-w-full tw-max-w-full container">
        <h2
        className={`tw-text-30 tablet:tw-text-36 tw-relative tw-uppercase tw-block tw-py-[45px] tablet:tw-p-[45px] tablet:tw-inline-block tw-tracking-[2px] tw-mx-auto tw-text-center ${styles['breakpoint-title']} ${modifierClass}`}
        >
        <span className="tw-z-2 tw-p-0 tw-relative tablet:tw-px-[45px]">{title}</span>
        <div
            className={styles['breakpoint-title-bg-img']}
            style={{
            backgroundImage: `url(${image})`,
            }}
        ></div>
        </h2>
    </div>
  );
};
