/* eslint-disable func-style */
import { min } from '@/styles/mq';
import styled from 'styled-components';
import { Flex } from 'ui/grid';

const ElementTitle = styled.label`
  color: rgba(0, 0, 0, 0.75);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.5;
  margin: 0 8px 3px 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  ${min('laptop')} {
    font-size: 14px;
  }
`;

export function Head({
  title,
  addon,
  htmlFor,
}: {
  readonly addon?: React.ReactNode;
  readonly htmlFor: string;
  readonly title: React.ReactNode;
}) {
  return (
    <Flex alignItems={['center']} flexDirection={['row']} justifyContent={['space-between']}>
      <ElementTitle htmlFor={htmlFor}>{title}</ElementTitle>
      {addon}
    </Flex>
  );
}

export function Container({ children }: { readonly children: React.ReactNode }) {
  return <Flex flexDirection="column">{children}</Flex>;
}