import React, { useState, useEffect } from 'react';
import { View, Pressable, StyleSheet, Text } from 'react-native';
import { NovaCompositionNavigationArrowRight as ArrowRight } from '@coorpacademy/nova-icons';
import { useTemplateContext } from '../../template/app-review/template-context';
const createStyleSheet = theme => StyleSheet.create({
  skill: {
    display: 'flex',
    flexDirection: 'row',
    overflow: 'hidden',
    alignItems: 'center',
    height: 118,
    borderRadius: 8,
    backgroundColor: theme.colors.gray.lighter,
    marginTop: theme.spacing.micro,
    marginBottom: theme.spacing.micro,
    padding: theme.spacing.base
  },
  skillTexts: {
    flex: 1,
    flexDirection: 'column'
  },
  skillTitle: {
    fontSize: 18,
    fontWeight: '600',
    lineHeight: 22,
    color: theme.colors.text.primary,
    marginBottom: theme.spacing.tiny
  },
  skillInfo: {
    fontSize: 12,
    lineHeight: 16,
    color: theme.colors.gray.medium
  }
});
const SkillCard = props => {
  const templateContext = useTemplateContext();
  const [styleSheet, setStylesheet] = useState(null);
  const {
    theme
  } = templateContext;
  const {
    skillTitle,
    skillAriaLabel,
    reviseLabel,
    reviseAriaLabel,
    onClick,
    buttonAriaLabel
  } = props;
  useEffect(() => {
    const _stylesheet = createStyleSheet(theme);
    setStylesheet(_stylesheet);
  }, [theme]);
  if (!styleSheet) {
    return null;
  }
  return /*#__PURE__*/React.createElement(Pressable, {
    style: styleSheet.skill,
    onPress: onClick,
    accessibilityRole: "button",
    accessibilityLabel: buttonAriaLabel
  }, /*#__PURE__*/React.createElement(View, {
    style: styleSheet.skillTexts
  }, /*#__PURE__*/React.createElement(Text, {
    style: styleSheet.skillTitle,
    accessibilityLabel: skillAriaLabel || skillTitle
  }, skillTitle), /*#__PURE__*/React.createElement(Text, {
    style: styleSheet.skillInfo,
    accessibilityLabel: reviseAriaLabel
  }, reviseLabel)), /*#__PURE__*/React.createElement(ArrowRight, {
    color: "#ededed",
    height: 20,
    width: 20
  }));
};
export default SkillCard;
//# sourceMappingURL=index.native.js.map