import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import Card from '_global/Card';
import Image from '../index';
import { Space } from '@xrnjs/ui';

export default () => {
  return (
    <Space>
      <Card title="基础背景图">
        <Image.Background
          source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        >
          <Text style={styles.text}>Inside Image.Background</Text>
        </Image.Background>
      </Card>

      <Card title="自定义样式背景图">
        <View style={styles.container}>
          <Image.Background
            source={{ uri: 'https://reactnative.dev/img/tiny_logo.png' }}
            style={styles.image}
            imageStyle={styles.imageInner}
          >
            <View style={styles.overlay}>
              <Text style={styles.text}>Inside Image.Background</Text>
            </View>
          </Image.Background>
        </View>
      </Card>
    </Space>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
  image: {
    width: '100%',
    height: 200,
    justifyContent: 'center',
    alignItems: 'center',
  },
  imageInner: {
    borderRadius: 10,
    opacity: 0.6,
  },
  overlay: {
    backgroundColor: 'rgba(0,0,0,0.3)',
    padding: 10,
    borderRadius: 5,
  },
  text: {
    color: 'white',
    fontSize: 18,
    fontWeight: 'bold',
  },
});