'use client'

import { useStyles, cx } from '../../contexts/StylesContext'

interface SettingsSectionProps {
    title: string
    children: React.ReactNode
}

export function SettingsSection({ title, children }: SettingsSectionProps) {
    const styles = useStyles()
    return (
        <section className={styles.settingsCard}>
            <h2 className={styles.settingsSectionTitle}>{title}</h2>
            {children}
        </section>
    )
}

interface SettingsItemProps {
    label: React.ReactNode
    meta?: React.ReactNode
    actions?: React.ReactNode
}

export function SettingsItem({ label, meta, actions }: SettingsItemProps) {
    const styles = useStyles()
    return (
        <div className={styles.settingsItem}>
            <div className={styles.settingsItemInfo}>
                <span className={styles.settingsItemLabel}>{label}</span>
                {meta && <span className={styles.settingsItemMeta}>{meta}</span>}
            </div>
            {actions && <div className={styles.settingsItemActions}>{actions}</div>}
        </div>
    )
}

export function SettingsList({ children }: { children: React.ReactNode }) {
    const styles = useStyles()
    return <div className={styles.settingsList}>{children}</div>
}

type BadgeVariant = 'primary' | 'success' | 'warning' | 'danger'

export function Badge({ variant, children }: { variant: BadgeVariant, children: React.ReactNode }) {
    const styles = useStyles()
    const variantClass = {
        primary: styles.badgePrimary,
        success: styles.badgeSuccess,
        warning: styles.badgeUnverified,
        danger: styles.badgeDanger,
    }[variant]

    return <span className={cx(styles.badge, variantClass)}>{children}</span>
}

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: 'primary' | 'secondary' | 'danger'
    size?: 'small' | 'normal'
}

export function Button({ variant = 'primary', size = 'small', className, children, ...props }: ButtonProps) {
    const styles = useStyles()
    const variantClass = {
        primary: styles.smallButtonPrimary,
        secondary: styles.smallButtonSecondary,
        danger: styles.smallButtonDanger,
    }[variant]

    return (
        <button className={cx(styles.smallButton, variantClass, className)} {...props}>
            {children}
        </button>
    )
}