import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Phone, Mail } from 'lucide-react';

interface CTASectionProps {
  title: string;
  description: string;
  primaryCta: {
    text: string;
    href: string;
    icon?: 'phone' | 'mail';
  };
  secondaryCta?: {
    text: string;
    href: string;
  };
  variant?: 'default' | 'dark';
}

export function CTASection({
  title,
  description,
  primaryCta,
  secondaryCta,
  variant = 'default',
}: CTASectionProps) {
  const isDark = variant === 'dark';
  const bgClass = isDark ? 'bg-navy' : 'bg-teal';
  const textClass = isDark ? 'text-cloud' : 'text-cloud';

  const getIcon = () => {
    if (primaryCta.icon === 'phone') return <Phone className="mr-2 h-4 w-4" />;
    if (primaryCta.icon === 'mail') return <Mail className="mr-2 h-4 w-4" />;
    return null;
  };

  return (
    <div className={`${bgClass} py-16 sm:py-20`}>
      <div className="mx-auto max-w-7xl px-4 lg:px-6">
        <div className="mx-auto max-w-2xl text-center">
          <h2 className={`text-3xl font-bold tracking-tight ${textClass} sm:text-4xl`}>
            {title}
          </h2>
          <p className={`mt-6 text-lg leading-8 ${isDark ? 'text-cloud/90' : 'text-slate-100'}`}>
            {description}
          </p>
          <div className="mt-8 flex items-center justify-center gap-x-6">
            <Button
              asChild
              size="lg"
              variant={isDark ? 'secondary' : 'default'}
            >
              <Link href={primaryCta.href}>
                {getIcon()}
                {primaryCta.text}
              </Link>
            </Button>
            {secondaryCta && (
              <Link
                href={secondaryCta.href}
                className={`text-sm font-semibold leading-6 ${textClass} hover:opacity-80 transition-opacity`}
              >
                {secondaryCta.text} <span aria-hidden="true">→</span>
              </Link>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}