import React from 'react';
import { View } from 'react-native';
import { MinimizedViewProps } from './type';
import { MinimizedViewTheme } from './theme';
import { Text } from '../Typography';
import { Button } from '../Button';

export const MinimizedView: React.FC<MinimizedViewProps> = (props) => {
  const {
    title,
    description,
    onPress,
    buttonText = 'Click Here',
    testID,
  } = props;

  return (
    <View
      accessibilityLabel={`minimized-view-container-${testID}`}
      testID={`minimized-view-container-${testID}`}
    >
      <View style={[MinimizedViewTheme.view]}>
        <View style={[MinimizedViewTheme.flex]}>
          <Text
            size="18"
            weight="700"
            theme="white"
            accessibilityLabel={`minimized-view-title-${testID}`}
            testID={`minimized-view-title-${testID}`}
          >
            {title}
          </Text>
          <Text
            size="14"
            weight="400"
            theme="white"
            accessibilityLabel={`minimized-view-desc-${testID}`}
            testID={`minimized-view-desc-${testID}`}
          >
            {description}
          </Text>
        </View>
        <View style={[MinimizedViewTheme.flex]}>
          <Button
            theme="light"
            testID={`minimized-view-${testID}`}
            onPress={onPress}
            block={false}
          >
            {buttonText}
          </Button>
        </View>
      </View>
    </View>
  );
};