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

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

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

const sizeConfig = {
  xs: { width: '120px' },
  sm: { width: '200px' },
  md: { width: '400px' },
  lg: { width: '600px' },
  xl: { width: '800px' },
};
