sg-delivery-customer/app/features/screens/providerDetailsScreen/providerDetailsScreen.styles.ts

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

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

export const getStyles = (colors: any) =>
  StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: colors.background,
    },
    content: {
      flex: 1,
    },
    contentBody: {
      paddingBottom: 32,
    },

    // ---------- Hero ----------
    heroWrap: {
      width,
      height: HERO_HEIGHT,
      backgroundColor: colors.inputBg,
    },
    heroImage: {
      width: '100%',
      height: '100%',
    },
    heroFallback: {
      width: '100%',
      height: '100%',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: colors.inputBg,
    },
    heroFallbackEmoji: {
      fontSize: 56,
    },
    heroOverlay: {
      position: 'absolute',
      left: 0,
      right: 0,
      bottom: 0,
      height: 90,
      backgroundColor: 'rgba(0,0,0,0.28)',
    },

    // Floating top icon row (back / share / favorite)
    topIconRow: {
      position: 'absolute',
      top: Platform.OS === 'ios' ? 54 : 16,
      left: 16,
      right: 16,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    iconButton: {
      width: 38,
      height: 38,
      borderRadius: 19,
      backgroundColor: 'rgba(255,255,255,0.92)',
      alignItems: 'center',
      justifyContent: 'center',
      ...Platform.select({
        ios: {
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 2 },
          shadowOpacity: 0.15,
          shadowRadius: 4,
        },
        android: { elevation: 3 },
      }),
    },
    iconButtonText: {
      fontSize: 16,
    },
    iconButtonGroup: {
      flexDirection: 'row',
    },

    // ---------- Info card ----------
    infoCard: {
      backgroundColor: colors.background,
      marginTop: -20,
      borderTopLeftRadius: 24,
      borderTopRightRadius: 24,
      paddingTop: 20,
      paddingHorizontal: 20,
      paddingBottom: 16,
      ...Platform.select({
        ios: {
          shadowColor: '#000',
          shadowOffset: { width: 0, height: -4 },
          shadowOpacity: 0.05,
          shadowRadius: 8,
        },
        android: { elevation: 4 },
      }),
    },
    infoTopRow: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'flex-start',
    },
    heroName: {
      fontSize: typography.fontSize.xl,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      flex: 1,
      marginRight: 12,
    },
    ratingBadge: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: colors.primary,
      borderRadius: 8,
      paddingHorizontal: 8,
      paddingVertical: 5,
    },
    ratingBadgeText: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.bold,
      color: '#FFFFFF',
      marginLeft: 3,
    },
    cuisineText: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
      marginTop: 4,
    },

    metaRow: {
      flexDirection: 'row',
      alignItems: 'center',
      marginTop: 12,
    },
    metaItem: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    metaIcon: {
      fontSize: 13,
      marginRight: 4,
    },
    metaText: {
      fontSize: typography.fontSize.sm,
      color: colors.text,
      fontWeight: typography.fontWeight.medium,
    },
    metaDivider: {
      width: 3,
      height: 3,
      borderRadius: 1.5,
      backgroundColor: colors.textSecondary,
      marginHorizontal: 10,
      opacity: 0.5,
    },

    statusRow: {
      flexDirection: 'row',
      alignItems: 'center',
      marginTop: 10,
    },
    statusDot: {
      width: 7,
      height: 7,
      borderRadius: 3.5,
      backgroundColor: colors.primary,
      marginRight: 6,
    },
    statusText: {
      fontSize: typography.fontSize.xs,
      color: colors.primary,
      fontWeight: typography.fontWeight.semibold,
    },
    statusTextMuted: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
    },

    // ---------- Offers ----------
    offersSection: {
      marginTop: 18,
    },
    offersScrollContent: {
      paddingHorizontal: 20,
    },
    offerChip: {
      flexDirection: 'row',
      alignItems: 'center',
      borderWidth: 1,
      borderStyle: 'dashed',
      borderColor: colors.primary,
      backgroundColor: colors.primaryMuted ?? '#E9F7EF',
      borderRadius: 10,
      paddingVertical: 8,
      paddingHorizontal: 12,
      marginRight: 10,
    },
    offerIcon: {
      fontSize: 15,
      marginRight: 6,
    },
    offerText: {
      fontSize: typography.fontSize.xs,
      fontWeight: typography.fontWeight.semibold,
      color: colors.text,
    },

    // ---------- Divider ----------
    sectionDivider: {
      height: 8,
      backgroundColor: colors.inputBg,
      marginTop: 18,
    },

    // ---------- Menu search ----------
    menuHeaderRow: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      paddingHorizontal: 20,
      paddingTop: 18,
      paddingBottom: 4,
    },
    menuTitle: {
      fontSize: typography.fontSize.lg,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
    },
    menuCount: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
    },

    // ---------- Category tabs ----------
    categoryRow: {
      paddingVertical: 14,
      paddingHorizontal: 20,
      flexGrow: 0,
    },
    categoryTab: {
      paddingHorizontal: 18,
      paddingVertical: 9,
      borderRadius: 22,
      borderWidth: 1.5,
      borderColor: colors.border,
      marginRight: 10,
      backgroundColor: colors.background,
    },
    categoryTabActive: {
      borderColor: colors.primary,
      backgroundColor: colors.primary,
    },
    categoryTabText: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
      fontWeight: typography.fontWeight.medium,
    },
    categoryTabTextActive: {
      color: '#FFFFFF',
      fontWeight: typography.fontWeight.bold,
    },

    // ---------- Menu list ----------
    menuList: {
      paddingHorizontal: 20,
    },
    emptyMenuWrap: {
      alignItems: 'center',
      paddingVertical: 40,
    },
    emptyMenuEmoji: {
      fontSize: 34,
      marginBottom: 8,
    },
    emptyMenuText: {
      color: colors.textSecondary,
      fontSize: typography.fontSize.sm,
    },

    // ---------- Cart strip ----------
    cartStripWrap: {
      position: 'absolute',
      left: 16,
      right: 16,
      bottom: Platform.OS === 'ios' ? 28 : 16,
    },
    cartStrip: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      backgroundColor: colors.primary,
      paddingHorizontal: 18,
      paddingVertical: 14,
      borderRadius: 16,
      ...Platform.select({
        ios: {
          shadowColor: '#000',
          shadowOffset: { width: 0, height: 6 },
          shadowOpacity: 0.25,
          shadowRadius: 12,
        },
        android: { elevation: 8 },
      }),
    },
    cartStripLeft: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    cartBagIcon: {
      fontSize: 18,
      marginRight: 8,
    },
    cartStripTextWrap: {},
    cartStripCount: {
      fontSize: typography.fontSize.xs,
      color: 'rgba(255,255,255,0.85)',
    },
    cartStripPrice: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.bold,
      color: '#FFFFFF',
    },
    viewCartButton: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: '#FFFFFF',
      paddingHorizontal: 16,
      paddingVertical: 9,
      borderRadius: 10,
    },
    viewCartText: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.bold,
      color: colors.primary,
      marginRight: 4,
    },
    viewCartArrow: {
      fontSize: 13,
      color: colors.primary,
    },
  });