import React, { memo } from 'react';
import Svg, { Path, Rect } from 'react-native-svg';

/**
 * A SIM card glyph, drawn in the same language as SimChooser's cards: the
 * chamfered top-right corner and the contact chip. Ionicons has no SIM icon,
 * and a phone or signal glyph says "device" rather than "the line your bank
 * knows you by".
 */
type Props = {
  size?: number;
  color: string;
};

const SimIconComponent = ({ size = 16, color }: Props) => (
  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
    <Path
      d="M7 2.75 H14.5 L19.25 7.5 V19.25 A2 2 0 0 1 17.25 21.25 H6.75 A2 2 0 0 1 4.75 19.25 V4.75 A2 2 0 0 1 6.75 2.75 Z"
      stroke={color}
      strokeWidth={1.6}
      strokeLinejoin="round"
    />
    <Rect x={8} y={10.5} width={8} height={7} rx={1.2} stroke={color} strokeWidth={1.4} />
    <Path d="M8 14 H16 M12 10.5 V17.5" stroke={color} strokeWidth={1} />
  </Svg>
);

export const SimIcon = memo(SimIconComponent);