import { StyleSheet } from 'react-native';

import { ThemeColors } from '../theme';

export const getStyles = (colors: ThemeColors) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.drawerBg,
    },
    header: {
      backgroundColor: colors.drawerHeader,
      padding: 24,
      paddingTop: 48,
      flexDirection: 'row',
      alignItems: 'center',
    },
    logoCircle: {
      width: 48,
      height: 48,
      borderRadius: 24,
      backgroundColor: colors.icon,
      justifyContent: 'center',
      alignItems: 'center',
    },
    headerDetails: {
      marginLeft: 14,
      flex: 1,
    },
    tenantName: {
      fontSize: 16,
      fontWeight: '800',
      color: '#FFFFFF',
    },
    adminEmail: {
      fontSize: 12,
      color: '#94A3B8',
      marginTop: 2,
    },
    scrollContent: {
      paddingVertical: 16,
    },
    menuContainer: {
      paddingHorizontal: 12,
    },
    itemWrapper: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 12,
      paddingHorizontal: 16,
      borderRadius: 10,
      marginBottom: 6,
    },
    itemWrapperActive: {
      backgroundColor: colors.border,
    },
    itemIcon: {
      marginRight: 14,
    },
    itemLabel: {
      fontSize: 14,
      fontWeight: '600',
      color: colors.textSecondary,
    },
    itemLabelActive: {
      color: colors.icon,
      fontWeight: '700',
    },
    footer: {
      borderTopWidth: 1,
      borderTopColor: colors.border,
      padding: 16,
      paddingBottom: 24,
    },
    logoutButton: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 12,
      paddingHorizontal: 16,
      borderRadius: 10,
    },
    logoutIcon: {
      marginRight: 14,
    },
    logoutText: {
      fontSize: 14,
      fontWeight: '700',
      color: '#EF4444',
    },
  });