import styles from "./field.module.css"

export default function Field(props: React.HtmlHTMLAttributes<HTMLDivElement>) {
  return <div {...props} className={styles.container} />
}

function Icon({ children }: React.PropsWithChildren) {
  return <span className={styles.icon}>{children}</span>
}

function Label(props: React.LabelHTMLAttributes<HTMLLabelElement>) {
  return <label {...props} className={styles.label} />
}

function TextLabel({ children }: React.PropsWithChildren) {
  return <span className={styles.label}>{children}</span>
}

function Content({ children }: React.PropsWithChildren) {
  return <div className={styles.content}>{children}</div>
}

Field.Content = Content
Field.Icon = Icon
Field.Label = Label
Field.TextLabel = TextLabel