import { createThemeStyles } 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: {
    width: '100%',
    height: BANNER_HEIGHT,
    backgroundColor: colors.backgroundSecondary,
    borderRadius: 12,
    overflow: 'hidden',
    marginHorizontal: 12,
    marginBottom: 12,
    elevation: 3,
    shadowColor: colors.cardShadow,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.15,
    shadowRadius: 6,
  },
  scrollView: {
    width: '100%',
    height: '100%',
  },
  image: {
    width: width - 24,
    height: BANNER_HEIGHT,
  },
  indicatorContainer: {
    position: 'absolute',
    bottom: 12,
    left: 0,
    right: 0,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  indicator: {
    width: 8,
    height: 8,
    borderRadius: 4,
    backgroundColor: 'rgba(255, 255, 255, 0.5)',
    marginHorizontal: 4,
  },
  indicatorActive: {
    width: 12,
    height: 8,
    backgroundColor: 'rgba(255, 255, 255, 0.95)',
  },
  loadingContainer: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.backgroundSecondary,
  },
}));