import React from "react";
import { ExternalLink, LucideIcon } from "lucide-react";

// تعریف تایپ‌ها برای انعطاف‌پذیری کامپوننت (پراپ‌های اختیاری)
interface CallToActionProps {
  title?: string;
  description?: string;
  buttonText?: string;
  buttonLink?: string;
  Icon?: LucideIcon;
}

export default function Sectionbanner({
  title = "آماده پیاده‌سازی و توسعه سیستم‌های پیچیده",
  description = "اگر نیاز به مشاوره معماری نرم‌افزار، مقیاس‌پذیری سرویس‌ها یا پیاده‌سازی ماژول‌های اینترانت و سازمانی دارید، در ارتباط باشید.",
  buttonText = "شروع همکاری فنی",
  buttonLink = "mailto:contact@example.com",
  Icon = ExternalLink,
}: CallToActionProps) {
  return (
    <section className="relative px-6 pb-20">
      <div className="mx-auto max-w-5xl rounded-2xl border border-gray-800 bg-gradient-to-b from-gray-900/80 to-gray-950 p-8 md:p-12 text-center relative overflow-hidden shadow-2xl">
        <div className="absolute top-0 right-0 w-64 h-64 bg-indigo-500/10 rounded-full blur-3xl pointer-events-none" />
        <div className="relative z-10 max-w-2xl mx-auto space-y-4">
          <h3 className="text-2xl md:text-3xl font-bold text-white">
            {title}
          </h3>
          <p className="text-xs md:text-sm text-gray-400 leading-relaxed">
            {description}
          </p>
          <div className="pt-2">
            <a
              href={buttonLink}
              className="inline-flex items-center gap-2 px-6 py-2.5 rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-semibold shadow-lg shadow-indigo-600/30 transition-all hover:scale-105"
            >
              <span>{buttonText}</span>
              {Icon && <Icon className="w-3.5 h-3.5" />}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}