import React from 'react';
import { Button } from '@/components/ui/Button';

export interface CallToActionProps {
  title?: string;
  description?: string;
  ctaLabel?: string;
  ctaHref?: string;
  theme?: 'light' | 'dark';
}

export const CallToAction: React.FC<CallToActionProps> = ({
  title = 'Bereit für Ihr Projekt?',
  description = 'Wir suchen stets nach neuen Herausforderungen und starken Partnern. Kontaktieren Sie uns für eine unverbindliche Beratung zu Ihrem Vorhaben.',
  ctaLabel = 'Jetzt Kontakt aufnehmen',
  ctaHref = '/de/kontakt',
  theme = 'light'
}) => {
  const isDark = theme === 'dark';
  
  return (
    <div className={`py-24 text-center ${isDark ? 'bg-primary-dark text-white' : 'bg-neutral-50 border-t border-neutral-100'}`}>
      <div className="container max-w-3xl mx-auto px-4">
        <h2 className={`font-heading text-4xl font-extrabold mb-6 ${isDark ? 'text-white' : 'text-neutral-dark'}`}>
          {title}
        </h2>
        <p className={`text-xl mb-10 leading-relaxed ${isDark ? 'text-white/70' : 'text-text-secondary'}`}>
          {description}
        </p>
        <Button 
          href={ctaHref} 
          size="xl"
          variant={isDark ? 'white' : 'primary'}
        >
          {ctaLabel}
        </Button>
      </div>
    </div>
  );
};