import { buttonHook } from './Button';

// This is _not_ supposed to be a real API. It's only intended to describe what
// I'm looking for. It's almost intentionally awful.

const formClassName = makeClass({
  border: '1 px solid grey',

  [s`> ${buttonHook}`]: buttonHook({
    margin: '0 1rem',
  }),
});

export default function InlineForm(props) {
  return (
    <form
      {...props}
      className={classNames(props.className, formClassName)}
    />
  );
}

// The idea is that you can do:
const form = (
  <InlineForm>
    <EmailInput />
    <PasswordInput />
    <LoginButton />
  </InlineForm>
);

// Where <LoginButton> renders a <Button>.