import { type ReactNode } from 'react';

import {
    bodyTextClassName,
    mutedTextClassName,
    pageTitleClassName,
    sectionDescriptionClassName,
    sectionTitleClassName,
} from '@admin/components/ui/field-styles';
import { cn } from '@admin/lib/utils';

export function AdminTextTitle({ children, className }: { children: ReactNode; className?: string }): React.JSX.Element {
    return <h3 className={cn(pageTitleClassName, className)}>{children}</h3>;
}

export function AdminTextHeading({
    as: Comp = 'h2',
    children,
    className,
}: {
    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
    children: ReactNode;
    className?: string;
}): React.JSX.Element {
    return <Comp className={cn(sectionTitleClassName, className)}>{children}</Comp>;
}

export function AdminTextLead({ children, className }: { children: ReactNode; className?: string }): React.JSX.Element {
    return <p className={cn('text-lg font-medium text-gray-800 dark:text-white', className)}>{children}</p>;
}

export function AdminTextBody({ children, className }: { children: ReactNode; className?: string }): React.JSX.Element {
    return <p className={cn(bodyTextClassName, className)}>{children}</p>;
}

export function AdminTextMuted({ children, className }: { children: ReactNode; className?: string }): React.JSX.Element {
    return <p className={cn(mutedTextClassName, className)}>{children}</p>;
}