import styled from 'styled-components';
import CSS from 'csstype';

import { theme, BaseContainer as CommonContainer } from '@veeqo/ui';
import { ReactNode } from 'react';

export interface PillProps {
  children?: ReactNode;
  className?: string;
  accentColor?: string;
}

const CommonPill = styled(CommonContainer)<PillProps>`
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px 24px 24px 24px;
  border-radius: 4px;
  ${(props) => props.accentColor
    && `
    box-shadow: 0px 1px 3px rgba(55, 66, 77, 0.15), inset 4px 0px 0px ${props.accentColor};
  `}
`;

const Pill = styled(CommonPill)<CSS.StandardProperties>`
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  margin: 0 auto;
  background-color: ${theme.colors.neutral.ink.dark};
  padding: 12px 24px 12px 12px;
  box-shadow: ${theme.shadows.lg};
  min-width: ${(props) => `${props.minWidth}px`};
  pointer-events: auto;
`;

const IconWrap = styled(CommonContainer)`
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: ${theme.radius.md};
  background-color: ${theme.colors.secondary.blue.base};
  color: #fff;
`;

const Wrap = styled(CommonContainer)`
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  flex-grow: 2;
  margin-left: 16px;
  margin-right: 16px;
  min-width: 400px;
`;

export { Pill, IconWrap, Wrap };