import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

const Code = ({ children }) => {
  return (
    <View style={styles.codeContainer}>
      <View style={styles.header}>
        <Text style={styles.headerText}>Code example</Text>
      </View>
      <Text style={styles.code}>{children}</Text>
    </View>
  )
}

export default Code

const styles = StyleSheet.create({
  codeContainer: {
    backgroundColor: '#f0f0f0',
    // padding: 16,
    borderRadius: 8,
    marginVertical: 16,
  },
  code: {
    fontFamily: 'monospace',
  },
  header: {
    backgroundColor: '#000',
    paddingVertical: 4,
    paddingHorizontal: 8,
    marginBottom: 8,
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8,
  },
  headerText: {
    color: '#fff',
  },
})