import styles from "./upcoming.module.scss";
import { MdEventAvailable } from "react-icons/md";

interface Program {
  id: number;
  title: string;
  description: string;
  date: string;
}

/* TEMP SAMPLE DATA */
const samplePrograms: Program[] = [
  {
    id: 1,
    title: "Sunday Worship Service",
    description: "A powerful time of worship, word, and fellowship.",
    date: "Sunday • Feb 9, 2026",
  },
  {
    id: 2,
    title: "Midweek Bible Study",
    description: "In-depth teaching to strengthen your walk with God.",
    date: "Wednesday • Feb 12, 2026",
  },
  {
    id: 3,
    title: "Prayer & Fasting Program",
    description: "Corporate prayer and fasting for spiritual growth.",
    date: "Feb 15 – Feb 21, 2026",
  },
  {
    id: 4,
    title: "Leadership & Workers Meeting",
    description: "Strategic meeting for all department leaders and workers.",
    date: "Saturday • Feb 22, 2026",
  },
  {
    id: 5,
    title: "Youth & Teens Service",
    description: "Empowering the next generation through faith and purpose.",
    date: "Sunday • Feb 23, 2026",
  },
];

const UpcomingPrograms: React.FC = () => {
  const programs = samplePrograms;
  const hasPrograms = programs.length > 0;

  return (
    <div className={styles.programs}>
      {/* HEADER */}
      <div className={styles.programs__header}>
        <div className={styles.programs__title}>
          <MdEventAvailable />
          <h2>Upcoming Programs & Events</h2>
        </div>
      </div>


      {/* CONTENT */}
      <div className={styles.programs__content}>
        {hasPrograms ? (
          programs.map((program) => (
            <div key={program.id} className={styles.program}>
              <h3>{program.title}</h3>
              <p>{program.description}</p>
              <span className={styles.program__date}>{program.date}</span>
            </div>
          ))
        ) : (
          <div className={styles.programs__empty}>
            <MdEventAvailable />
            <h4>No upcoming programs</h4>
            <p>There are no scheduled programs at the moment.</p>
          </div>
        )}
      </div>
    </div>
  );
};

export default UpcomingPrograms;