import React from 'react';
import { Pressable, StyleSheet, Image } from 'react-native';
import { useCameraPermissions } from 'expo-camera';
import { ThemedText} from '@/components/ThemedText';
import Link from 'expo-router/link';

export default function ScannerSection (){
  const [permission, requestPermission] = useCameraPermissions();
  const isPermissionGranted = Boolean(permission?.granted);

  return (
    isPermissionGranted ? (
      <Link href="./scanner" asChild>
        <Pressable style={styles.scanButton}>
          <Image
            source={require('@/assets/images/qr-code-icon.png')}
            style={styles.qrIcon}
          />
          <ThemedText style={styles.scanButtonText}>Scan</ThemedText>
        </Pressable>
      </Link>
    ) : (
      <Pressable onPress={requestPermission} style={styles.grantButton}>
        <ThemedText style={styles.grantText}>Grant Permission</ThemedText>
      </Pressable>
    )
  );
};

const styles = StyleSheet.create({
  scanButton: { padding: 12, borderRadius: 8, backgroundColor: '#007bff', alignItems: 'center' },
  qrIcon: { width: 40, height: 40 },
  scanButtonText: { color: '#fff', fontWeight: 'bold' },
  grantButton: { padding: 12, borderRadius: 8, backgroundColor: '#007bff', alignItems: 'center' },
  grantText: { color: '#fff', fontWeight: 'bold' },
});