import React from 'react';
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'outline' | 'white' | 'ghost';
  size?: 'sm' | 'md' | 'lg';
}

export const Button: React.FC<ButtonProps> = ({ 
  children, 
  className, 
  variant = 'primary', 
  size = 'md', 
  ...props 
}) => {
  const variants = {
    primary: 'bg-primary text-white hover:brightness-110 border border-transparent',
    outline: 'bg-transparent border-2 border-primary text-primary hover:bg-primary hover:text-white',
    white: 'bg-white text-black hover:bg-gray-200 border border-transparent',
    ghost: 'bg-transparent text-white hover:bg-white/10'
  };

  const sizes = {
    sm: 'px-4 py-2 text-sm',
    md: 'px-6 py-3 text-base',
    lg: 'px-8 py-4 text-lg font-semibold'
  };

  return (
    <button 
      className={cn(
        'rounded-md transition-all duration-300 flex items-center justify-center gap-2',
        variants[variant],
        sizes[size],
        className
      )}
      {...props}
    >
      {children}
    </button>
  );
};

export const SectionTitle: React.FC<{ subtitle: string; title: string; center?: boolean; light?: boolean }> = ({ 
  subtitle, 
  title, 
  center = true,
  light = true
}) => {
  return (
    <div className={cn('mb-12', center ? 'text-center' : 'text-left')}>
      <span className="text-primary font-bold uppercase tracking-widest text-sm mb-2 block">
        {subtitle}
      </span>
      <h2 className={cn('text-3xl md:text-4xl font-bold', light ? 'text-white' : 'text-gray-900')}>
        {title}
      </h2>
      <div className={cn(
        'h-1 w-20 bg-primary mt-4 rounded-full',
        center ? 'mx-auto' : ''
      )} />
    </div>
  );
};

export const Container: React.FC<{ children: React.ReactNode; className?: string }> = ({ children, className }) => (
  <div className={cn('max-w-7xl mx-auto px-4 sm:px-6 lg:px-8', className)}>
    {children}
  </div>
);