import { useMemo } from 'react';
import { View } from 'react-native';
import Svg, { Path, Rect } from 'react-native-svg';
import { qrShape } from '@musicshare/shared';

/** Black-on-white QR code (scanners need the contrast) with the standard 4-module quiet zone. */
export function QrCode({ value, size = 240 }: { value: string; size?: number }) {
  const shape = useMemo(() => qrShape(value), [value]);
  const quiet = 4;
  const total = shape.size + quiet * 2;
  return (
    <View accessible accessibilityLabel={`QR code for ${value}`} style={{ width: size, height: size, borderRadius: 16, overflow: 'hidden' }}>
      <Svg width={size} height={size} viewBox={`${-quiet} ${-quiet} ${total} ${total}`}>
        <Rect x={-quiet} y={-quiet} width={total} height={total} fill="#ffffff" />
        <Path d={shape.path} fill="#000000" />
      </Svg>
    </View>
  );
}