import styled from 'styled-components';
import { theme } from '@veeqo/ui';
import { StoreStyles } from './types';

interface CommonCustomStoreProps {
  name: string;
}

const CommonCustomStore = styled.div<CommonCustomStoreProps>`
  width: ${theme.sizes.xl};
  height: ${theme.sizes.xl};
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: ${theme.sizes.md};

  ${(props) => {
    const styles = StoreStyles[props.name as keyof typeof StoreStyles];
    return `
      background: ${styles?.background || theme.colors.neutral.ink.base};
      color: ${styles?.color || 'white'};

      &::after {
        content: ${!props.children && `"${styles?.content || 'V'}"`};
      }
    `;
  }}
`;

export default CommonCustomStore;