import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
  // 容器样式
  container: {
    flex: 1,
  },

  // 演示容器
  demoContainer: {
    flex: 1,
    padding: 16,
  },

  // 内容区域
  contentWrapper: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 8,
  },

  // 文本样式
  contentText: {
    color: 'white',
    fontWeight: 'bold',
    fontSize: 20,
    textAlign: 'center',
  },

  contentSubText: {
    color: 'white',
    fontSize: 14,
    marginTop: 8,
    textAlign: 'center',
    opacity: 0.8,
  },

  // 示例标题
  demoTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginBottom: 8,
  },

  demoDescription: {
    fontSize: 14,
    color: '#666',
    marginBottom: 16,
    lineHeight: 20,
  },

  // 按钮组
  buttonGroup: {
    marginBottom: 16,
  },

  // 布局示例容器
  layoutExample: {
    height: 200,
    borderRadius: 8,
    overflow: 'hidden',
  },

  layoutExampleTall: {
    height: 300,
  },

  // 颜色变量
  colorPrimary: {
    backgroundColor: '#1890ff',
  },

  colorSuccess: {
    backgroundColor: '#52c41a',
  },

  colorWarning: {
    backgroundColor: '#faad14',
  },

  colorError: {
    backgroundColor: '#f5222d',
  },

  colorOrange: {
    backgroundColor: '#ff934a',
  },

  colorPurple: {
    backgroundColor: '#722ed1',
  },

  colorGray: {
    backgroundColor: '#8c8c8c',
  },

  // 内容布局样式
  centerContent: {
    justifyContent: 'center',
    alignItems: 'center',
  },

  topContent: {
    justifyContent: 'flex-start',
    alignItems: 'center',
    paddingTop: 40,
  },

  bottomContent: {
    justifyContent: 'flex-end',
    alignItems: 'center',
    paddingBottom: 40,
  },

  leftContent: {
    justifyContent: 'center',
    alignItems: 'flex-start',
    paddingLeft: 40,
  },

  rightContent: {
    justifyContent: 'center',
    alignItems: 'flex-end',
    paddingRight: 40,
  },

  // 多列布局
  rowContainer: {
    flexDirection: 'row',
    gap: 16,
  },

  columnItem: {
    flex: 1,
    height: 120,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },

  // 嵌套布局
  nestedContainer: {
    padding: 16,
    gap: 16,
  },

  nestedItem: {
    height: 80,
    borderRadius: 8,
    justifyContent: 'center',
    alignItems: 'center',
  },

  // 混合文本按钮示例
  textLabel: {
    color: '#666',
    fontSize: 14,
  },
  priceText: {
    color: '#f5222d',
    fontWeight: 'bold',
  },

  // 自定义视图示例
  customViewWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    padding: 8,
    borderRadius: 4,
  },
  couponText: {
    fontSize: 12,
  },

  // 纯自定义视图布局
  customLeftView: {
    height: 40,
    backgroundColor: '#e6f7ff',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
  },
  customLeftText: {
    color: '#1890ff',
  },
  customRightView: {
    height: 40,
    backgroundColor: '#f6ffed',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
  },
  customRightText: {
    color: '#52c41a',
  },

  // 垂直布局示例
  verticalTopView: {
    height: 60,
    backgroundColor: '#e6f7ff',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    width: '100%',
  },
  verticalBottomView: {
    height: 60,
    backgroundColor: '#f6ffed',
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 4,
    width: '100%',
  },

  // 自动换行示例
  longText: {
    fontSize: 14,
    color: '#333',
    lineHeight: 20,
  },
  infoBox: {
    padding: 10,
    backgroundColor: '#fff7e6',
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#ffd591',
    alignSelf: 'flex-start',
  },
  infoText: {
    color: '#fa8c16',
    fontSize: 12,
  },

  // 嵌套布局示例
  nestedWrapper: {
    backgroundColor: '#f0f2f5',
    padding: 8,
    borderRadius: 4,
  },
  nestedText: {
    fontSize: 12,
  },
});