import { Subtitle, hasDivider } from '@/lib/types/navigation';
import styles from './MenuSubtitle.module.css';

interface MenuSubtitleProps {
  subtitle: Subtitle;
  variant: string;
}

export default function MenuSubtitle({ subtitle, variant }: MenuSubtitleProps) {
  const divider = hasDivider(subtitle) ? (
    <div className={styles.divider}>
      <span className={`${styles.dividersymbol}`}>
        {subtitle.divider.value}
      </span>
    </div>
  ) : (
    ''
  );

  return (
    <div className={`${styles.claim} ${styles[`${variant}`]}`}>
      {divider}
      <p className={`${styles.subtitle}`}>{subtitle.content}</p>
    </div>
  );
}