import { ThirdPartyAppLogoClass } from '../../components/descope-third-party-app-logo/ThirdPartyAppLogoClass';
import { getThemeRefs } from '../../helpers/themeHelpers';
import globals from '../globals';

const globalRefs = getThemeRefs(globals);
const vars = ThirdPartyAppLogoClass.cssVarList;

const thirdPartyAppLogo = {
  [vars.gap]: globalRefs.spacing.lg,
  [vars.arrowsColor]: globalRefs.colors.surface.dark,
  [vars.thirdPartyAppLogoFallback]:
    'url(https://imgs.descope.com/components/third-party-app-logo-placeholder.svg)',
  [vars.companyLogoFallback]:
    'url(https://imgs.descope.com/components/project-logo-placeholder.svg)',
  size: {
    xs: {
      [vars.logoMaxHeight]: '30px',
      [vars.logoMaxWidth]: '120px',
    },
    sm: {
      [vars.logoMaxHeight]: '40px',
      [vars.logoMaxWidth]: '160px',
    },
    md: {
      [vars.logoMaxHeight]: '48px',
      [vars.logoMaxWidth]: '200px',
    },
    lg: {
      [vars.logoMaxHeight]: '60px',
      [vars.logoMaxWidth]: '240px',
    },
  },
};

export default thirdPartyAppLogo;
export { vars };
