'use client';

import React from 'react';
import Image from 'next/image';
import { ExternalLink } from 'lucide-react';
import { milestones } from '@/data/milestones';
import styles from './MilestonesSection.module.css';

export const MilestonesSection: React.FC = () => {
  return (
    <section id="milestones" className={styles.milestonesSection}>
      <div className="content-container">
        {/* Section Header */}
        <div className="section-header">
          <span className="section-eyebrow">AWARDS & ACHIEVEMENTS</span>
          <div className="section-title-wrap">
            <h2 className="section-title">Milestones Along the Way</h2>
            <div className="section-underline" />
          </div>
        </div>

        {/* Certificate Cards List */}
        <div className={styles.cardsList}>
          {milestones.map((item) => (
            <div key={item.id} className={styles.certCard}>
              {/* Thumbnail */}
              <div className={styles.thumbnailContainer}>
                <Image
                  src={item.image}
                  alt={item.title}
                  fill
                  className={styles.certImage}
                />
              </div>

              {/* Content Details */}
              <div className={styles.certDetails}>
                <div className={styles.titleRow}>
                  <h3 className={styles.certTitle}>{item.title}</h3>
                </div>

                <div className={styles.issuerRow}>
                  <span className={styles.issuerText}>{item.issuer}</span>
                </div>

                <div className={styles.dateBadge}>{item.date}</div>

                <p className={styles.description}>{item.description}</p>

                {/* View Certificate Link */}
                <div className={styles.actionRow}>
                  <a
                    href={item.link || '#'}
                    className={styles.viewCertLink}
                    target="_blank"
                    rel="noopener noreferrer"
                  >
                    <span>View certificate</span>
                    <ExternalLink size={20} strokeWidth={2.25} />
                  </a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};