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

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

export const getStyles = (colors: any) =>
  StyleSheet.create({
    // Status Card / Container
    cardContainer: {
      backgroundColor: colors.cardBg,
      borderRadius: 16,
      borderWidth: 1,
      borderColor: colors.border,
      overflow: 'hidden',
    },
    headerSection: {
      padding: 16,
      flexDirection: 'row',
      alignItems: 'center',
      borderBottomWidth: 1,
      borderBottomColor: colors.border,
    },
    headerIconContainer: {
      width: 48,
      height: 48,
      borderRadius: 24,
      backgroundColor: '#E8F5E9',
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: 16,
    },
    headerIconText: {
      fontSize: 24,
    },
    headerTextContainer: {
      flex: 1,
    },
    statusHeaderTitle: {
      fontSize: typography.fontSize.lg,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
      marginBottom: 4,
    },
    statusHeaderDesc: {
      fontSize: typography.fontSize.sm,
      color: colors.textSecondary,
      lineHeight: 18,
    },

    // Horizontal Stepper
    stepperWrapper: {
      paddingVertical: 20,
      paddingHorizontal: 12,
      borderBottomWidth: 1,
      borderBottomColor: colors.border,
    },
    stepperRow: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      position: 'relative',
    },
    stepLineBackground: {
      position: 'absolute',
      top: 14,
      left: '12%',
      right: '12%',
      height: 3,
      backgroundColor: colors.border,
      zIndex: 1,
    },
    stepLineActive: {
      position: 'absolute',
      top: 14,
      left: '12%',
      height: 3,
      backgroundColor: colors.primary,
      zIndex: 2,
    },
    stepItem: {
      alignItems: 'center',
      flex: 1,
      zIndex: 3,
    },
    stepDot: {
      width: 28,
      height: 28,
      borderRadius: 14,
      backgroundColor: colors.cardBg,
      borderWidth: 2,
      borderColor: colors.border,
      justifyContent: 'center',
      alignItems: 'center',
      marginBottom: 6,
    },
    stepDotCompleted: {
      borderColor: colors.primary,
      backgroundColor: colors.primary,
    },
    stepDotActive: {
      borderColor: colors.primary,
      backgroundColor: colors.cardBg,
      borderWidth: 3,
    },
    stepCheckmark: {
      color: '#FFFFFF',
      fontSize: 12,
      fontWeight: 'bold',
    },
    stepInnerDotActive: {
      width: 10,
      height: 10,
      borderRadius: 5,
      backgroundColor: colors.primary,
    },
    stepLabel: {
      fontSize: 11,
      fontWeight: typography.fontWeight.medium,
      color: colors.textSecondary,
      textAlign: 'center',
    },
    stepLabelActive: {
      color: colors.primary,
      fontWeight: typography.fontWeight.bold,
    },

    // Driver Section
    driverSection: {
      padding: 16,
      borderBottomWidth: 1,
      borderBottomColor: colors.border,
      backgroundColor: colors.inputBg,
    },
    driverInfoRow: {
      flexDirection: 'row',
      alignItems: 'center',
      marginBottom: 12,
    },
    driverAvatarContainer: {
      width: 44,
      height: 44,
      borderRadius: 22,
      backgroundColor: colors.primary,
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: 12,
    },
    driverAvatarText: {
      color: '#FFFFFF',
      fontSize: 16,
      fontWeight: typography.fontWeight.bold,
    },
    driverMeta: {
      flex: 1,
    },
    driverRoleText: {
      fontSize: 10,
      textTransform: 'uppercase',
      letterSpacing: 0.5,
      color: colors.textSecondary,
      fontWeight: typography.fontWeight.semibold,
      marginBottom: 2,
    },
    driverNameText: {
      fontSize: typography.fontSize.md,
      fontWeight: typography.fontWeight.bold,
      color: colors.text,
    },
    driverVehicleText: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      marginTop: 2,
    },
    ratingBadge: {
      flexDirection: 'row',
      alignItems: 'center',
      backgroundColor: '#FFF9C4',
      paddingHorizontal: 8,
      paddingVertical: 4,
      borderRadius: 12,
    },
    ratingText: {
      fontSize: 12,
      fontWeight: typography.fontWeight.bold,
      color: '#F57F17',
    },
    driverActionsRow: {
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    actionButton: {
      flex: 1,
      flexDirection: 'row',
      height: 40,
      borderRadius: 8,
      justifyContent: 'center',
      alignItems: 'center',
      borderWidth: 1,
    },
    callButton: {
      backgroundColor: colors.primary,
      borderColor: colors.primary,
      marginRight: 6,
    },
    messageButton: {
      backgroundColor: colors.cardBg,
      borderColor: colors.border,
      marginLeft: 6,
    },
    actionIcon: {
      marginRight: 6,
      fontSize: 16,
    },
    callButtonText: {
      color: '#FFFFFF',
      fontWeight: typography.fontWeight.bold,
      fontSize: typography.fontSize.sm,
    },
    messageButtonText: {
      color: colors.text,
      fontWeight: typography.fontWeight.semibold,
      fontSize: typography.fontSize.sm,
    },

    // Collapsible Trigger / Detailed Logs
    toggleSection: {
      alignItems: 'center',
      justifyContent: 'center',
      paddingVertical: 12,
    },
    toggleButton: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingHorizontal: 16,
      paddingVertical: 4,
    },
    toggleButtonText: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.bold,
      color: colors.primary,
      marginRight: 4,
    },
    toggleChevron: {
      fontSize: 12,
      color: colors.primary,
    },
    detailedTimelineWrapper: {
      paddingHorizontal: 20,
      paddingBottom: 16,
    },

    // Legacy vertical timeline classes (re-styled for premium feel)
    timelineRow: {
      flexDirection: 'row',
    },
    timelineDotColumn: {
      alignItems: 'center',
      width: 24,
    },
    timelineDot: {
      width: 14,
      height: 14,
      borderRadius: 7,
      borderWidth: 2,
      borderColor: colors.border,
      backgroundColor: colors.cardBg,
      justifyContent: 'center',
      alignItems: 'center',
      marginTop: 4,
    },
    timelineDotCompleted: {
      borderColor: colors.primary,
      backgroundColor: colors.primary,
    },
    timelineDotCancelled: {
      borderColor: colors.error,
      backgroundColor: colors.error,
    },
    timelineCheck: {
      color: '#FFFFFF',
      fontSize: 8,
      fontWeight: 'bold',
    },
    timelineLine: {
      width: 2,
      flex: 1,
      minHeight: 36,
      backgroundColor: colors.border,
      marginVertical: 4,
    },
    timelineLineCompleted: {
      backgroundColor: colors.primary,
    },
    timelineContent: {
      flex: 1,
      paddingBottom: 18,
      paddingLeft: 16,
    },
    timelineLabelCompleted: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.semibold,
      color: colors.text,
    },
    timelineLabelPending: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.regular,
      color: colors.textSecondary,
    },
    timelineLabelCancelled: {
      fontSize: typography.fontSize.sm,
      fontWeight: typography.fontWeight.bold,
      color: colors.error,
    },
    timelineTime: {
      fontSize: typography.fontSize.xs,
      color: colors.textSecondary,
      marginTop: 4,
    },
  });