import { StyleSheet } from 'react-native'
import appColors from '../../../../theme/appColors'
import {
  windowHeight,
  windowWidth,
  fontSizes,
} from '../../../../theme/appConstant'
import appFonts from '../../../../theme/appFonts'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: appColors.red,
  },
  scrollView: {
    flex: 1,
    marginTop: windowHeight(1),
  },
  scrollContent: {
    padding: windowWidth(4),
    paddingBottom: windowHeight(4),
  },
  taskCard: {
    backgroundColor: appColors.white,
    borderRadius: windowWidth(5),
    padding: windowWidth(4),
    marginBottom: windowHeight(2),
    borderWidth: windowWidth(0.45),
  },
  taskTitle: {
    fontSize: fontSizes.FONT4,
    color: appColors.primaryFont,
    marginBottom: windowHeight(1.5),
    lineHeight: windowHeight(3),
    fontFamily: appFonts.medium,
    width: '85%',
  },
  progressContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: windowWidth(3),
  },
  image: {
    width: '100%',
    resizeMode: 'contain',
    marginTop: windowHeight(-1.9),
  },
  progressBarBackground: {
    flex: 1,
    height: windowHeight(2),
    backgroundColor: appColors.border,
    borderRadius: windowHeight(5),
    overflow: 'hidden',
    justifyContent: 'center',
    marginTop: windowHeight(-0.8),
  },
  progressBarFill: {
    height: windowHeight(1.9),
    borderRadius: windowHeight(5),
    overflow: 'hidden',
  },
  progressText: {
    fontSize: fontSizes.FONT3HALF1,
    color: appColors.iconColor,
    minWidth: windowWidth(9),
    textAlign: 'right',
    marginBottom: windowHeight(1.5),
  },
  gap: {
    gap: windowHeight(9.3),
  },
})

export default styles
