import styled from 'styled-components';

import { View as ViewComponent } from '@veeqo/ui';
import { ViewKey } from '../types';

type ContainerAttributesType = {
  key: ViewKey;
};

const Container = styled.div.attrs<ContainerAttributesType>((props) => ({
  'data-view-key': props.key,
}))<ContainerAttributesType>`
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  div[class*="-container"]:first-child span {
    white-space: nowrap;
  }
`;

const View = styled(ViewComponent)``;

export { Container, View };