import { BookOpenText, GraduationCap, MessageCircle } from 'lucide-react';
import { messagesByLocale, type Locale } from '@/i18n/content';
import { HeroControls } from './HeroControls';
import { ImageWithSkeleton } from './ImageWithSkeleton';
import styles from './HeroSection.module.css';

export const HeroSection = ({ locale }: { locale: Locale }) => {
  const copy = messagesByLocale[locale].hero;

  return (
    <div className={styles.heroContentWrapper}>
      <HeroControls locale={locale} />
      <div className={styles.heroContent}>
        <div className={styles.avatarWrapper}>
          <div className={styles.avatarRingOuter}>
            <div className={styles.avatarContainer}>
              <ImageWithSkeleton
                src="/images/avatar.png"
                alt={copy.avatarAlt}
                fill
                sizes="192px"
                preload
                skeletonShape="circle"
                className={styles.avatarImg}
              />
            </div>
          </div>
        </div>

        <h1 className={`font-display ${styles.heroTitle}`} aria-label={copy.titleLabel}>
          <span className={styles.heroGreeting}>{copy.greeting}</span>
          <span className={styles.heroName}>{copy.name}</span>
        </h1>
        <p className={styles.heroSubtitle}>{copy.subtitle}</p>

        <div className={styles.actionButtons}>
          <button type="button" className={`pill-btn ${styles.heroButton} ${styles.heroButtonUpcoming}`} aria-label={copy.blogLabel} title={copy.comingSoon} disabled>
            <BookOpenText size={17} strokeWidth={2} aria-hidden="true" />
            {copy.blog}
          </button>
          <button type="button" className={`pill-btn ${styles.heroButton} ${styles.heroButtonUpcoming}`} aria-label={copy.coursesLabel} title={copy.comingSoon} disabled>
            <GraduationCap size={18} strokeWidth={2} aria-hidden="true" />
            {copy.courses}
          </button>
          <a href="https://www.linkedin.com/messaging/compose/?recipient=ACoAAEJsAwMBCv3L9dYcEXWam-l3pLOJ3UspX7w" target="_blank" rel="noreferrer" className={`pill-btn ${styles.heroButton} ${styles.heroButtonPrimary}`} aria-label={copy.contactLabel}>
            <MessageCircle size={17} strokeWidth={2} aria-hidden="true" />
            {copy.contact}
          </a>
        </div>
      </div>
    </div>
  );
};