import React from 'react'; import { View, Text, TextInput, Pressable, ScrollView, Image } from 'react-native';

// Block-level & semantic tags export const Div = ({ className = '', style, children, ...props }) => ( <View className={className} style={style} {...props}>{children}</View> );

export const Section = Div; export const Article = Div; export const Aside = Div; export const Header = Div; export const Footer = Div; export const Main = Div; export const Nav = Div; export const Figure = Div; export const Figcaption = Text;

// Headings export const H1 = ({ className = '', style, children, ...props }) => ( <Text className={text-4xl font-bold ${className}} style={style} {...props}>{children}</Text> ); export const H2 = ({ className = '', style, children, ...props }) => ( <Text className={text-3xl font-bold ${className}} style={style} {...props}>{children}</Text> ); export const H3 = ({ className = '', style, children, ...props }) => ( <Text className={text-2xl font-semibold ${className}} style={style} {...props}>{children}</Text> ); export const H4 = ({ className = '', style, children, ...props }) => ( <Text className={text-xl font-semibold ${className}} style={style} {...props}>{children}</Text> ); export const H5 = ({ className = '', style, children, ...props }) => ( <Text className={text-lg font-medium ${className}} style={style} {...props}>{children}</Text> ); export const H6 = ({ className = '', style, children, ...props }) => ( <Text className={text-base font-medium ${className}} style={style} {...props}>{children}</Text> );

// Text tags export const P = ({ className = '', style, children, ...props }) => ( <Text className={text-base ${className}} style={style} {...props}>{children}</Text> ); export const Span = ({ className = '', style, children, ...props }) => ( <Text className={className} style={style} {...props}>{children}</Text> ); export const Strong = ({ className = '', style, children, ...props }) => ( <Text className={font-bold ${className}} style={style} {...props}>{children}</Text> ); export const Em = ({ className = '', style, children, ...props }) => ( <Text className={italic ${className}} style={style} {...props}>{children}</Text> ); export const Small = ({ className = '', style, children, ...props }) => ( <Text className={text-sm ${className}} style={style} {...props}>{children}</Text> ); export const Mark = ({ className = '', style, children, ...props }) => ( <Text className={bg-yellow-200 ${className}} style={style} {...props}>{children}</Text> );

// Form elements export const Input = ({ className = '', style, ...props }) => ( <TextInput className={className} style={style} {...props} /> ); export const Textarea = Input; export const Label = ({ className = '', style, children, ...props }) => ( <Text className={className} style={style} {...props}>{children}</Text> ); export const Button = ({ className = '', style, children, onPress, ...props }) => ( <Pressable className={className} style={style} onPress={onPress} {...props}>{children}</Pressable> );

// Lists export const Ul = ({ className = '', style, children, ...props }) => ( <View className={className} style={style} {...props}>{children}</View> ); export const Ol = Ul; export const Li = ({ className = '', style, children, ...props }) => ( <Text className={ml-4 ${className}} style={style} {...props}>{'• '}{children}</Text> );

// Media export const Img = ({ className = '', style, ...props }) => ( <Image className={className} style={style} {...props} /> ); export const Video = Div; export const Audio = Div;

// Others export const Br = () => <Text>{'\n'}</Text>; export const Hr = ({ className = '', style, ...props }) => ( <View className={border-b ${className}} style={style} {...props} /> ); export const Code = ({ className = '', style, children, ...props }) => ( <Text className={font-mono ${className}} style={style} {...props}>{children}</Text> ); export const Pre = ({ className = '', style, children, ...props }) => ( <ScrollView horizontal className={className} style={style} {...props}> <Text className="font-mono">{children}</Text> </ScrollView> );

// Generic link (Note: TouchableOpacity or Linking API needed for full behavior) export const A

Heres complete this for use html tags in react native wiyh import