import React from "react";
import { cn } from "@/lib/utils";

interface SectionTitleProps {
  title: string;
  subtitle?: string;
  linkText?: string;
  linkHref?: string;
  className?: string;
  titleClassName?: string;
  titleStyle?: React.CSSProperties;
  subtitleClassName?: string;
  subtitleStyle?: React.CSSProperties;
  children?: React.ReactNode;
}

export const SectionTitle: React.FC<SectionTitleProps> = ({
  title,
  subtitle,
  linkText,
  className,
  titleClassName,
  titleStyle,
  subtitleClassName,
  subtitleStyle,
  children,
}) => {
  return (
    <div className={cn("flex flex-col sm:flex-row sm:items-end justify-between mb-8 gap-4", className)}>
      <div>
        <h2 
          style={titleStyle}
          className={cn("text-3xl sm:text-4xl lg:text-[48px] font-medium tracking-tight text-slate-900 leading-tight", titleClassName || "font-sans")}
        >
          {title}
        </h2>
        {subtitle && (
          <p 
            style={subtitleStyle}
            className={cn("mt-2 text-[16px] sm:text-lg text-slate-500 max-w-3xl leading-relaxed para-colour", subtitleClassName)}
          >
            {subtitle}
          </p>
        )}
      </div>

      <div className="flex items-center gap-3">
        {linkText && (
          <span className="text-base sm:text-lg font-bold text-[#0077b6] whitespace-nowrap cursor-default select-none">
            {linkText}
          </span>
        )}
        {children}
      </div>
    </div>
  );
};