type SvgLogoProps = {
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
  square?: boolean;
};

export function OfficerSvgLogo({ size = 'xl', square = false }: SvgLogoProps) {
  if (square) {
    return <OfficerSvgLogoSquare size={size} />;
  }

  return <OfficerSvgLogoRegular size={size} />;
}

export function OfficerSvgLogoRegular({ size = 'xl' }: SvgLogoProps) {
  const config = sizeConfig.regular[size];

  return (
    <img
      src="/officer-logo.svg"
      alt="Officer Logo"
      style={{ width: config.width, height: 'auto', transform: 'skew(-15deg, -2deg)' }}
    />
  );
}

export function OfficerSvgLogoSquare({ size = 'xl' }: SvgLogoProps) {
  const config = sizeConfig.square[size];

  return (
    <img
      src="/officer-logo.svg"
      alt="Officer Logo"
      style={{ width: config.width, height: 'auto', transform: 'skew(-15deg, -2deg)' }}
    />
  );
}

const sizeConfig = {
  regular: {
    xs: { width: '180px' },
    sm: { width: '300px' },
    md: { width: '600px' },
    lg: { width: '900px' },
    xl: { width: '1200px' },
    '2xl': { width: '1500px' },
  },
  square: {
    xs: { width: '120px' },
    sm: { width: '200px' },
    md: { width: '400px' },
    lg: { width: '600px' },
    xl: { width: '800px' },
    '2xl': { width: '1000px' },
  },
};
