import React from 'react';

import styles from './Callout.module.css';

interface CalloutProps {
  type: 'default' | 'example' | 'info' | 'warning' | 'tip' | 'spoiler';
  title?: string;
  children: React.ReactNode;
}

export default function Callout({ type, title, children }: CalloutProps) {
  const isSpoiler = type === 'spoiler';
  const spoilerID = isSpoiler
    ? `spoiler-${Math.random().toString(36).substr(2, 9)}`
    : undefined;
  return (
    <div className={`${styles.container} ${styles[type]}`}>
      {isSpoiler ? (
        <>
          <input type="checkbox" id={spoilerID} className={styles.toggle} />
          <label htmlFor={spoilerID} className={styles.label}>
            {title || 'Show spoiler'}
          </label>
        </>
      ) : (
        <p className={styles.title}>{title}</p>
      )}
      <span className={styles.badge}>{type.toUpperCase()}</span>
      <div className={`${styles.content}`}>{children}</div>
    </div>
  );
}
