import styles from './auth.module.css'

export function FormGroup({ label, children }) {
  return (
    <div className={styles.formGroup}>
      {label && <label className={styles.label}>{label}</label>}
      {children}
    </div>
  )
}

export function Input(props) {
  return <input className={styles.input} {...props} />
}

export function Select({ children, ...props }) {
  return (
    <div className={styles.selectWrap}>
      <select className={styles.input} {...props}>{children}</select>
      <div className={styles.selectArrow} />
    </div>
  )
}

export function Button({ loading, children, ...props }) {
  return (
    <button className={styles.btn} {...props}>
      {children}
      {loading && <span className={styles.spinner} />}
    </button>
  )
}

export function Alert({ message }) {
  if (!message) return null
  return <div className={styles.alert}>{message}</div>
}

export function StepDots({ current, total }) {
  return (
    <div className={styles.stepDots}>
      {Array.from({ length: total }).map((_, i) => (
        <div key={i} className={styles.stepDot} style={{
          background: i === current ? 'var(--accent)' : 'var(--border)',
          width: i === current ? '18px' : '6px',
        }} />
      ))}
      <span className={styles.stepLabel}>Schritt {current + 1} von {total}</span>
    </div>
  )
}
