sg-delivery-customer/app/components/productRatingModal/productRatingModal.styles.ts

import { StyleSheet, Dimensions, Platform } from 'react-native';
import { typography } from '@theme';

const { width } = Dimensions.get('window');

export const getStyles = (colors: any) =>
  StyleSheet.create({
    // ── Backdrop ──────────────────────────────────────────────────────────────
    overlay: {
      flex: 1,
      backgroundColor: 'rgba(0,0,0,0.55)',
      justifyContent: 'flex-end',
    },

    // ── Sheet ─────────────────────────────────────────────────────────────────
    sheet: {
      backgroundColor: colors.cardBg ?? '#FFFFFF',
      borderTopLeftRadius: 28,
      borderTopRightRadius: 28,
      paddingHorizontal: 24,
      paddingBottom: Platform.OS === 'ios' ? 40 : 28,
      ...Platform.select({
        ios: {
          shadowColor: '#000',
          shadowOffset: { width: 0, height: -4 },
          shadowOpacity: 0.12,
          shadowRadius: 16,
        },
        android: { elevation: 16 },
      }),
    },

    // ── Drag handle ───────────────────────────────────────────────────────────
    dragHandle: {
      width: 40,
      height: 4,
      borderRadius: 2,
      backgroundColor: colors.border ?? '#DEDEDE',
      alignSelf: 'center',
      marginTop: 12,
      marginBottom: 20,
    },

    // ── Product hero ──────────────────────────────────────────────────────────
    productHero: {
      alignItems: 'center',
      marginBottom: 20,
    },
    productEmoji: {
      fontSize: 52,
      marginBottom: 10,
    },
    productName: {
      fontSize: typography.fontSize.lg,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      textAlign: 'center',
      marginBottom: 4,
    },
    productMeta: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
      textAlign: 'center',
    },

    // ── Rating section ────────────────────────────────────────────────────────
    ratingSection: {
      alignItems: 'center',
      marginBottom: 24,
    },
    ratingLabel: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.semibold,
      color: colors.textSecondary,
      marginBottom: 14,
      textTransform: 'uppercase',
      letterSpacing: 0.6,
    },
    ratingHint: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      marginTop: 10,
    },

    // ── Divider ───────────────────────────────────────────────────────────────
    divider: {
      height: 1,
      backgroundColor: colors.border ?? '#ECECEC',
      marginBottom: 20,
    },

    // ── Comment input ─────────────────────────────────────────────────────────
    inputSection: {
      marginBottom: 20,
    },
    inputLabel: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.semibold,
      color: colors.text,
      marginBottom: 8,
    },
    optionalTag: {
      fontWeight: typography.fontWeight.regular ?? '400',
      color: colors.textSecondary,
      fontSize: typography.fontSize.xs,
    },
    commentInput: {
      backgroundColor: colors.surface ?? '#F5F6F8',
      borderRadius: 12,
      borderWidth: 1.5,
      borderColor: colors.border ?? '#ECECEC',
      paddingHorizontal: 14,
      paddingVertical: 12,
      fontSize: typography.fontSize.sm,
      color: colors.text,
      minHeight: 88,
      textAlignVertical: 'top',
    },
    commentInputFocused: {
      borderColor: colors.primary ?? '#05824C',
    },
    charCount: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      textAlign: 'right',
      marginTop: 4,
    },

    // ── Image upload ──────────────────────────────────────────────────────────
    imageSection: {
      marginBottom: 24,
    },
    imageLabel: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.semibold,
      color: colors.text,
      marginBottom: 10,
    },
    imageScrollContent: {
      gap: 10,
    },
    addImageBtn: {
      width: 72,
      height: 72,
      borderRadius: 12,
      borderWidth: 1.5,
      borderColor: colors.primary ?? '#05824C',
      borderStyle: 'dashed',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: colors.primaryMuted ?? '#E9F7EF',
    },
    addImageIcon: {
      fontSize: 22,
      marginBottom: 2,
    },
    addImageText: {
      fontSize: 10,
      color: colors.primary ?? '#05824C',
      fontWeight: typography.fontWeight.semibold,
    },
    imageThumb: {
      width: 72,
      height: 72,
      borderRadius: 12,
      position: 'relative',
    },
    imageThumbnail: {
      width: 72,
      height: 72,
      borderRadius: 12,
    },
    removeImageBtn: {
      position: 'absolute',
      top: -6,
      right: -6,
      width: 20,
      height: 20,
      borderRadius: 10,
      backgroundColor: colors.error ?? '#E53935',
      alignItems: 'center',
      justifyContent: 'center',
    },
    removeImageText: {
      color: '#FFF',
      fontSize: 11,
      fontWeight: 'bold',
      lineHeight: 14,
    },

    // ── Submit button ─────────────────────────────────────────────────────────
    submitBtn: {
      borderRadius: 14,
      paddingVertical: 15,
      alignItems: 'center',
      justifyContent: 'center',
    },
    submitBtnActive: {
      backgroundColor: colors.primary ?? '#05824C',
    },
    submitBtnDisabled: {
      backgroundColor: colors.border ?? '#DEDEDE',
    },
    submitBtnText: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.bold,
      color: '#FFFFFF',
    },
    submitBtnTextDisabled: {
      color: colors.textSecondary ?? '#9E9E9E',
    },

    // ── Already-rated banner ──────────────────────────────────────────────────
    ratedBanner: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: colors.primaryMuted ?? '#E9F7EF',
      borderRadius: 12,
      padding: 14,
      marginBottom: 20,
    },
    ratedBannerEmoji: {
      fontSize: 20,
      marginRight: 10,
    },
    ratedBannerText: {
      fontSize: typography.fontSize.sm,
      color: colors.primary ?? '#05824C',
      fontWeight: typography.fontWeight.semibold,
    },
  });