import React, { forwardRef } from "react";
import { CTASectionProps } from "../../types";
import { Button } from "../ui/Button";

// Client Component version - with event handlers
export const CTASection = forwardRef<HTMLElement, CTASectionProps>(
  (
    {
      className = "",
      title = "Ready to Get Started?",
      subtitle = "Join thousands of developers who are already building amazing applications",
      buttonText = "Start Building",
      variant = "primary",
      onButtonClick,
      children,
      ...props
    },
    ref
  ) => {
    return (
      <section
        ref={ref}
        className={`py-16 px-4 sm:px-6 lg:px-8 bg-muted/50 ${className}`}
        {...props}
      >
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
            {title}
          </h2>

          {subtitle && (
            <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
              {subtitle}
            </p>
          )}

          {onButtonClick && (
            <Button
              size="lg"
              variant={variant}
              onClick={onButtonClick}
              className="text-lg px-8 py-3"
            >
              {buttonText}
            </Button>
          )}

          {children}
        </div>
      </section>
    );
  }
);

CTASection.displayName = "CTASection";

// Server Component version - no event handlers, link-based navigation
export const CTASectionServer = forwardRef<
  HTMLElement,
  Omit<CTASectionProps, "onButtonClick"> & {
    buttonHref?: string;
    buttonTarget?: "_self" | "_blank";
  }
>(
  (
    {
      className = "",
      title = "Ready to Get Started?",
      subtitle = "Join thousands of developers who are already building amazing applications",
      buttonText = "Start Building",
      variant = "primary",
      buttonHref,
      buttonTarget = "_self",
      children,
      ...props
    },
    ref
  ) => {
    // Explicitly remove onButtonClick if it exists in props (runtime safety)
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const { onButtonClick: _onButtonClick, ...safeProps } = props as Record<
      string,
      unknown
    >;

    const buttonClasses = `inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 text-lg px-8 py-3 h-11 ${
      variant === "primary"
        ? "bg-primary text-primary-foreground hover:bg-primary/90 shadow-sm"
        : variant === "secondary"
        ? "bg-secondary text-secondary-foreground hover:bg-secondary/80"
        : "border border-input bg-background hover:bg-accent hover:text-accent-foreground"
    }`;

    return (
      <section
        ref={ref}
        className={`py-16 px-4 sm:px-6 lg:px-8 bg-muted/50 ${className}`}
        {...safeProps}
      >
        <div className="max-w-4xl mx-auto text-center">
          <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
            {title}
          </h2>

          {subtitle && (
            <p className="text-lg text-muted-foreground mb-8 max-w-2xl mx-auto">
              {subtitle}
            </p>
          )}

          {buttonHref && (
            <a
              href={buttonHref}
              target={buttonTarget}
              rel={
                buttonTarget === "_blank" ? "noopener noreferrer" : undefined
              }
              className={buttonClasses}
            >
              {buttonText}
            </a>
          )}

          {children}
        </div>
      </section>
    );
  }
);

CTASectionServer.displayName = "CTASectionServer";