import Link from "next/link";
import {
  ArrowRight,
  CheckCircle2,
} from "lucide-react";

type ContentPageProps = {
  eyebrow: string;
  title: string;
  description: string;
  items: string[];
  cta?: string;
};

export default function ContentPage({
  eyebrow,
  title,
  description,
  items,
  cta = "Discuss Your Requirement",
}: ContentPageProps) {
  return (
    <main>
      <section className="inner-hero">
        <div className="inner-hero-grid" />

        <div className="container inner-hero-content">
          <span className="section-label">{eyebrow}</span>

          <h1>{title}</h1>

          <p>{description}</p>

          <div className="hero-actions">
            <Link href="/request-quote" className="button">
              {cta}
              <ArrowRight size={18} />
            </Link>

            <Link href="/contact" className="button button-secondary">
              Contact Us
            </Link>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="inner-content-grid">
            {items.map((item, index) => (
              <article className="inner-card" key={item}>
                <span className="inner-card-number">
                  {String(index + 1).padStart(2, "0")}
                </span>

                <CheckCircle2 size={24} />

                <h3>{item}</h3>

                <p>
                  Designed around practical business requirements,
                  usability, security, scalability and long-term
                  maintainability.
                </p>
              </article>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}