Implement classNames() | JavaScript Interview Question

In our JSX, we set the className prop to add CSS classes to an element. It can be as simple as the following

<p className="classname1 classname2">
    Devtools Tech
</p>

Or conditional

<p className={`${shouldAddClassOne ? 'classname1' : ''}  classname2`}>
    Devtools Tech
</p>

and it gets complex based on the use-cases.

To help out in such cases, classnames package is a simple JavaScript utility for conditionally joining classNames together. For example --

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

// Arrays are recursively flattened
var arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

In this question, you need to implement the function classNames from scratch. Your function should be able to take different types of inputs and return a valid string of classes.