'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';
import { Info, BookOpen, Download } from 'lucide-react';
import styles from './Hero.module.css';

interface HeroProps {
  version?: string;
  title1: string;
  title2: string;
  description: string;
  image: string;
  badge?: string;
  className?: string;
}

export default function Hero({ version, title1, title2, description, image, badge, className }: HeroProps) {
  return (
    <section className={`${styles.hero} ${className}`}>
      <div className={styles.content}>
        <motion.div 
          initial={{ opacity: 0, x: -30 }}
          animate={{ opacity: 1, x: 0 }}
          transition={{ duration: 0.8 }}
          className={styles.left}
        >
          {version && <span className={styles.version}>{version}</span>}
          <h1 className={styles.title}>
            {title1} <br />
            <span className={styles.red}>{title2}</span>
          </h1>
          <p className={styles.description}>{description}</p>
          
          <div className={styles.actions}>
            <button className={`${styles.btn} ${styles.btnPrimary}`}>
              <Info size={16} /> <span>INFORMATION</span>
            </button>
            <button className={`${styles.btn} ${styles.btnSecondary}`}>
              <BookOpen size={16} /> <span>GUIDES</span>
            </button>
            <button className={`${styles.btn} ${styles.btnDownload}`}>
              <Download size={16} /> <span>DOWNLOAD</span>
            </button>
          </div>
        </motion.div>

        <motion.div 
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 1, delay: 0.2 }}
          className={styles.right}
        >
          <div className={styles.imageWrapper}>
            {badge && <div className={styles.badge}>{badge}</div>}
            <Image 
              src={image} 
              alt={title1} 
              width={1000} 
              height={1000} 
              className={styles.mainImage}
              priority
            />
          </div>
        </motion.div>
      </div>
    </section>
  );
}
