import { createThemeStyles, createResponsiveThemeStyles } from '@/theme';
import { Dimensions } from 'react-native';

// const { width } = Dimensions.get('window');
// const BANNER_HEIGHT = width * 0.32534; // 保持 32.534% 的宽高比

/**
 * 创建主题样式
 */
export const styles = createThemeStyles((colors) => ({
  container: {
    backgroundColor: colors.background,
    paddingTop: 5,
    borderBottomWidth: 1,
    borderBottomColor: colors.border,
  },
  scrollView: {
    paddingHorizontal: 12,
  },
  menuItem: {
    paddingHorizontal: 12,
    paddingVertical: 5,
    marginRight: 8,
    borderRadius: 0,
    backgroundColor: 'transparent',
    justifyContent: 'center',
    alignItems: 'center',
    elevation: 1,
    shadowColor: colors.cardShadow,
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.1,
    shadowRadius: 2,
    borderBottomColor: 'transparent',
    borderBottomWidth: 2,
  },
  menuItemActive: {
    // backgroundColor: `${colors.tint}15`, // 主题色 + 20% 透明度
    elevation: 2,
    shadowOpacity: 0.15,
    borderBottomColor: colors.tint,
    borderRadius: 0,
  },
  menuText: {
    fontSize: 14,
    color: colors.text,
    fontWeight: '600',
  },
  menuTextActive: {
    color: colors.tint,
  },
  menuIcon: {
    width: 30,
    height: 30,
    marginBottom: 4,
  },
}));

export const themeStyles = createResponsiveThemeStyles({
  menuItemActive: {
    backgroundColor: '',
  },
}, {
  menuItemActive: {
    backgroundColor: '',
  },
}, {
  menuItemActive: {
    backgroundColor: '',
  },
});