'use client';

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

interface ProductShowcaseProps {
  label: string;
  title1: string;
  title2: string;
  image: string;
  specs: { label: string; value: string }[];
  description: string;
}

export default function ProductShowcase({ label, title1, title2, image, specs, description }: ProductShowcaseProps) {
  return (
    <section className={styles.section}>
      <div className={styles.bgImage}>
        <Image src={image} alt={title1} fill className={styles.image} />
        <div className={styles.overlay}></div>
      </div>

      <div className={styles.container}>
        <div className={styles.top}>
          <span className={styles.label}>{label}</span>
          <h2 className={styles.title}>
            {title1} <span className={styles.red}>{title2}</span>
          </h2>
          <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>
        </div>

        <div className={styles.right}>
           <div className={styles.specBox}>
              <div className={styles.specHeader}>TECHNICAL SPECS</div>
              {specs.map((spec, i) => (
                <div key={i} className={styles.specItem}>
                   <span>{spec.label}</span>
                   <strong>{spec.value}</strong>
                </div>
              ))}
           </div>
        </div>
      </div>
    </section>
  );
}
