import React from 'react';

interface TypographyProps {
    children: React.ReactNode;
    className?: string;
}

interface LabelProps extends TypographyProps {
    htmlFor?: string;
}

// Page Headers
export const PageTitle = ({ children, className = '' }: TypographyProps) => (
    <h1 className={`text-xl sm:text-2xl lg:text-3xl font-bold text-gray-900 dark:text-gray-100 ${className}`}>
        {children}
    </h1>
);

export const PageSubtitle = ({ children, className = '' }: TypographyProps) => (
    <p className={`text-sm sm:text-base text-gray-600 dark:text-gray-400 mt-1 ${className}`}>
        {children}
    </p>
);

// Section Headers
export const SectionTitle = ({ children, className = '' }: TypographyProps) => (
    <h2 className={`text-lg sm:text-xl font-semibold text-gray-900 dark:text-gray-100 ${className}`}>
        {children}
    </h2>
);

export const SectionSubtitle = ({ children, className = '' }: TypographyProps) => (
    <h3 className={`text-base sm:text-lg font-medium text-gray-900 dark:text-gray-100 ${className}`}>
        {children}
    </h3>
);

// Card Headers
export const CardTitle = ({ children, className = '' }: TypographyProps) => (
    <h3 className={`text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100 ${className}`}>
        {children}
    </h3>
);

export const CardSubtitle = ({ children, className = '' }: TypographyProps) => (
    <p className={`text-sm text-gray-600 dark:text-gray-400 ${className}`}>
        {children}
    </p>
);

// Stats and Values
export const StatValue = ({ children, className = '' }: TypographyProps) => (
    <div className={`text-lg sm:text-xl lg:text-2xl font-semibold text-gray-900 dark:text-gray-100 ${className}`}>
        {children}
    </div>
);

export const StatLabel = ({ children, className = '' }: TypographyProps) => (
    <dt className={`text-xs sm:text-sm font-medium text-gray-500 dark:text-gray-400 truncate ${className}`}>
        {children}
    </dt>
);

// Body Text
export const BodyText = ({ children, className = '' }: TypographyProps) => (
    <p className={`text-sm sm:text-base text-gray-700 dark:text-gray-300 ${className}`}>
        {children}
    </p>
);

export const SmallText = ({ children, className = '' }: TypographyProps) => (
    <p className={`text-xs sm:text-sm text-gray-600 dark:text-gray-400 ${className}`}>
        {children}
    </p>
);

// Labels
export const Label = ({ children, htmlFor, className = '' }: LabelProps) => (
    <label htmlFor={htmlFor} className={`block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 ${className}`}>
        {children}
    </label>
);

// Form Headers with Mobile Support
interface FormHeaderProps {
    title: string;
    subtitle?: string;
    backButton?: React.ReactNode;
    className?: string;
}

export const FormHeader = ({ title, subtitle, backButton, className = '' }: FormHeaderProps) => (
    <div className={`space-y-3 sm:space-y-4 ${className}`}>
        {/* Mobile: Stack vertically, Desktop: Side by side */}
        <div className="flex flex-col space-y-3 sm:flex-row sm:items-center sm:gap-4 sm:space-y-0">
            {backButton && (
                <div className="flex-shrink-0">
                    {backButton}
                </div>
            )}
            <div className="min-w-0 flex-1">
                <PageTitle className="break-words">{title}</PageTitle>
                {subtitle && <PageSubtitle className="break-words">{subtitle}</PageSubtitle>}
            </div>
        </div>
    </div>
);

// Page Container with consistent mobile spacing
export const PageContainer = ({ children, className = '' }: TypographyProps) => (
    <div className={`p-4 sm:p-6 lg:p-8 space-y-4 sm:space-y-6 max-w-none ${className}`}>
        {children}
    </div>
);

// Mobile-friendly card container
export const MobileCard = ({ children, className = '' }: TypographyProps) => (
    <div className={`card p-3 sm:p-4 lg:p-6 ${className}`}>
        {children}
    </div>
);