import type { ReactNode } from 'react';
import styled from 'styled-components';
import { min } from 'styles/mq';
import { Flex } from 'ui';

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,
}: {
  title: ReactNode;
  addon?: ReactNode;
  htmlFor: string;
}) {
  return (
    <Flex flexDirection={['row']} justifyContent={['space-between']} alignItems={['center']}>
      <ElementTitle htmlFor={htmlFor}>{title}</ElementTitle>
      {addon}
    </Flex>
  );
}

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