import * as React from "react";

export interface FeldProps {
  label: React.ReactNode;
  /** Read-only display mode - mutually exclusive with `children`. */
  value?: React.ReactNode;
  /** Interactive control mode (input/select/Switch/etc.) - mutually exclusive with `value`. */
  children?: React.ReactNode;
  /** Wraps `children` with a trailing unit label, e.g. "Minuten" (the "MitEinheit" pattern). */
  unit?: string;
  /** Omit the bottom hairline - use on the last field in a group. */
  last?: boolean;
  className?: string;
}

export function Feld({ label, value, children, unit, last, className }: FeldProps) {
  const classes = ["ads-feld"];
  if (last) classes.push("ads-feld--last");
  if (className) classes.push(className);

  const control = children ? (
    unit ? (
      <span className="ads-mit-einheit">
        {children}
        <span>{unit}</span>
      </span>
    ) : (
      children
    )
  ) : (
    <span>{value}</span>
  );

  return (
    <div className={classes.join(" ")}>
      <label>{label}</label>
      {control}
    </div>
  );
}
