import React from 'react';
import { Text, TextStyle } from 'react-native';
import { TouchableOpacity } from 'react-native-gesture-handler';
import { responsiveFontSize, responsiveHeight } from 'react-native-responsive-dimensions';
import { colors } from '../theme/colors';

interface TabProps {
  active: boolean;
  onPress: () => void;
  title: string;
  left?: boolean;
  right?: boolean;
}

const Tab = (props: TabProps) => {
  const { active, onPress, title, left, right } = props;

  const containerStyles = {
    paddingTop: responsiveHeight(1),
    paddingBottom: responsiveHeight(2),
    ...(left ? { paddingRight: 10 } : {}),
    ...(right ? { paddingLeft: 10 } : {}),
    borderBottomColor: active ? colors.pinkMain : colors.greyLighter,
    borderBottomWidth: 3,
  };

  const textSyles: TextStyle = {
    textAlign: 'center',
    fontSize: responsiveFontSize(2),
    fontFamily: 'Lato-Regular',
    color: active ? colors.greyVeryDark : colors.greyMedium,
  };

  return (
    <TouchableOpacity style={containerStyles} onPress={onPress}>
      <Text style={textSyles}>{title}</Text>
    </TouchableOpacity>
  );
};
export default Tab;