import { Link } from '@inertiajs/react';
import { CTA_VARIANT } from '../variants/cta.variants';

export type CTAProps = {
  title: string;
  buttonLabel: string;
  buttonHref: string;
  backgroundColor?: string;
};

export default function CTASection({
  title,
  buttonLabel,
  buttonHref,
  backgroundColor,
}: CTAProps) {
  const v = CTA_VARIANT;

  return (
    <section
      className={v.sectionClass}
      style={backgroundColor ? { background: backgroundColor } : undefined}
    >
      <div className={v.wrapperClass}>
        <div className={v.contentClass}>
          <h2 className={v.titleClass}>{title}</h2>
          <Link href={buttonHref} prefetch className={v.buttonClass}>
            {buttonLabel}
          </Link>
        </div>
      </div>
    </section>
  );
}