import React, { FC } from 'react';
import tw from 'twin.macro';

const Legalese: FC<{
  children: Array<React.ReactNode>;
}> = ({ children, ...restProps }: { children: Array<React.ReactNode> }) => {
  return (
    <div tw="flex flex-wrap justify-between bg-brand" {...restProps}>
      {children.map((child, index) => (
        <span
          key={index}
          css={[
            tw`text-center text-white whitespace-nowrap`,
            index === 0
              ? tw`w-full flex-none md:(order-last w-auto)`
              : tw`flex-1`,
          ]}
        >
          {child}
        </span>
      ))}
    </div>
  );
};

export default Legalese;