import React from "react";
import { Footprints, BarChart2 } from "lucide-react";
import type { MountainRouteDetail } from "@/types/trip";
import styles from "./RouteAboutSection.module.css";

interface RouteAboutSectionProps {
  route: MountainRouteDetail;
}

export default function RouteAboutSection({ route }: RouteAboutSectionProps) {
  const description =
    route.description ||
    route.mountain.description ||
    `Jalur ${route.name} menawarkan pengalaman mendaki yang menyenangkan dengan panorama alam yang memukau di ${route.mountain.name}. Cocok untuk pendaki pemula maupun berpengalaman.`;

  const hasMeta = Boolean(route.estimated_duration || route.difficulty_label);

  return (
    <section className={styles.aboutSection} aria-label={`Tentang Jalur ${route.name}`}>
      <h2 className={styles.sectionHeading}>Tentang Jalur {route.name}</h2>
      <p className={styles.sectionDesc}>{description}</p>

      {/* ── Metadata Cards — hanya field yang benar-benar diisi admin ──── */}
      {hasMeta && (
        <div className={styles.metaGrid}>
          {route.estimated_duration && (
            <div className={styles.metaCard}>
              <div className={styles.metaIconWrap} aria-hidden="true">
                <Footprints size={22} className={styles.metaIcon} />
              </div>
              <div className={styles.metaContent}>
                <span className={styles.metaLabel}>Estimasi Waktu</span>
                <strong className={styles.metaValue}>{route.estimated_duration}</strong>
              </div>
            </div>
          )}

          {route.difficulty_label && (
            <div className={styles.metaCard}>
              <div className={styles.metaIconWrap} aria-hidden="true">
                <BarChart2 size={22} className={styles.metaIcon} />
              </div>
              <div className={styles.metaContent}>
                <span className={styles.metaLabel}>Tingkat Kesulitan</span>
                <strong className={styles.metaValue}>{route.difficulty_label}</strong>
              </div>
            </div>
          )}
        </div>
      )}

      {/* ── Inspirational Quote Box ──────────────────────────────────── */}
      <div className={styles.quoteBox} aria-hidden="true">
        <div className={styles.quoteIconCircle}>
          <span className={styles.quoteSymbol}>“</span>
        </div>
        <div className={styles.quoteContent}>
          <blockquote className={styles.quoteText}>
            Perjalanan ini bukan hanya tentang sampai ke puncak, tetapi tentang cerita yang kamu
            bawa pulang.
          </blockquote>
          <span className={styles.quoteAuthor}>— PPT Adventure</span>
        </div>
      </div>
    </section>
  );
}