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

const styles = StyleSheet.create({
  chartContainer: {
    alignItems: 'center',
    marginTop: windowHeight(2.6),
    marginHorizontal: windowHeight(2.5),
    borderRadius: windowHeight(0.8),
    paddingBottom: windowHeight(2.3),
    borderWidth: windowHeight(0.1),
  },
  centerText: {
    position: 'absolute',
    top: '34%',
    alignItems: 'center',
  },
  title: {
    fontSize: fontSizes.FONT3HALF,
    color: appColors.black,
    fontFamily: appFonts.medium,
  },
  count: {
    fontSize: fontSizes.FONT4HALF,
    fontFamily: appFonts.bold,
    color: appColors.primary,
    top: '15%',
  },

  legendValue: {
    fontWeight: 'bold',
  },
  statusContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginTop: windowHeight(4),
    width: '100%',
    backgroundColor: appColors.white,
  },
  statusBox: {
    alignItems: 'center',
  },
  statusTop: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 4,
  },
  statusDot: {
    width: windowHeight(1.6),
    height: windowHeight(0.6),
    borderRadius: 4,
    marginRight: 6,
  },
  statusLabel: {
    fontSize: fontSizes.FONT3HALF,
    color: appColors.iconColor,
    fontFamily: appFonts.regular,
  },
  statusValue: {
    fontSize: fontSizes.FONT3HALF,
    fontFamily: appFonts.regular,
    color: appColors.black,
    left: windowWidth(2.8),
  },
  gap: {
    gap: windowHeight(12.5),
  },
  profileImageView: {
    position: 'absolute',
    top: windowHeight(-7),
    left: '48%',
    marginLeft: windowWidth(-12),
    width: windowHeight(12),
    height: windowHeight(12),
    borderRadius: windowHeight(15),
    borderWidth: windowHeight(0.8),
    zIndex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: windowHeight(2),
  },
  profileImage: {
    width: windowHeight(12),
    height: windowHeight(12),
    resizeMode: 'cover',
    borderRadius: windowHeight(6),
  },
  charImage: {
    width: windowHeight(10),
    height: windowHeight(10),
    resizeMode: 'cover',
    borderRadius: windowHeight(6),
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: appColors.primary,
  },
  firstLetter: {
    color: appColors.white,
    fontSize: fontSizes.FONT8,
    fontFamily: appFonts.bold,
  },
  line: {
    height: windowHeight(1.5),
    width: windowWidth(0.32),
    backgroundColor: appColors.iconColor,
  },
  box: {
    width: '90%',
    height: windowWidth(19),
    marginTop: windowHeight(2),
    alignItems: 'center',
    justifyContent: 'space-between',
    borderRadius: windowWidth(2.5),
    paddingHorizontal: windowWidth(1),
  },
  smallBox: {
    width: '30%',
    height: windowWidth(19),
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: windowWidth(2.5),
  },
  total: {
    fontFamily: appFonts.semiBold,
    fontSize: fontSizes.FONT4HALF1,
  },
  subText: {
    fontFamily: appFonts.regular,
    fontSize: fontSizes.FONT3HALF1,
    color: appColors.iconColor,
  },
})
export default styles
