import type { Audit } from '../types';
import { Zap, Timer } from 'lucide-react';
import styles from '../styles/quiz.module.css';

interface LandingHookProps {
  audit: Audit;
  onStart: () => void;
}

export const LandingHook: React.FC<LandingHookProps> = ({ audit, onStart }) => {
  return (
    <div className={styles.landing}>
      <span className={styles.landingIcon}>
        <Zap size={48} color="var(--noon-warning)" />
      </span>
      {!window.noon_audit_config.hideTitle && (
        <h1 className={styles.landingTitle}>{audit.title}</h1>
      )}
      <p className={styles.landingHook}>{audit.hook_text}</p>
      <div className={styles.timerBadge}>
        <Timer size={16} />
        <span>{audit.questions.length} questions · ~60 seconds</span>
      </div>
      <button className={styles.startButton} onClick={onStart} id="noon-audit-start">
        Start Audit →
      </button>
    </div>
  );
};