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

export const getStyles = (colors: any) => StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.background,
  },
  content: {
    flex: 1,
    padding: 24,
  },
  timeline: {
    flex: 1,
    justifyContent: 'center',
    paddingLeft: 8,
  },
  milestoneRow: {
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginBottom: 8,
  },
  milestoneIndicator: {
    alignItems: 'center',
    width: 24,
    marginRight: 16,
  },
  dot: {
    width: 16,
    height: 16,
    borderRadius: 8,
    backgroundColor: colors.border,
    zIndex: 1,
  },
  dotActive: {
    backgroundColor: colors.primary,
  },
  dotCurrent: {
    width: 20,
    height: 20,
    borderRadius: 10,
    backgroundColor: colors.primary,
    borderWidth: 3,
    borderColor: '#E8F5E9',
  },
  line: {
    width: 2,
    flex: 1,
    backgroundColor: colors.border,
    minHeight: 30,
    marginVertical: -2,
  },
  lineActive: {
    backgroundColor: colors.primary,
  },
  milestoneInfo: {
    paddingBottom: 20,
  },
  milestoneLabel: {
    fontSize: typography.fontSize.md,
    fontWeight: typography.fontWeight.medium,
    color: colors.textSecondary,
    marginBottom: 2,
  },
  milestoneLabelActive: {
    color: colors.text,
    fontWeight: typography.fontWeight.semibold,
  },
  milestoneTime: {
    fontSize: typography.fontSize.sm,
    color: colors.placeholder,
  },
  supportCard: {
    backgroundColor: colors.cardBg,
    borderRadius: 12,
    padding: 20,
    borderWidth: 1,
    borderColor: colors.border,
  },
  supportTitle: {
    fontSize: typography.fontSize.md,
    fontWeight: typography.fontWeight.semibold,
    color: colors.text,
    marginBottom: 4,
  },
  supportSubtext: {
    fontSize: typography.fontSize.sm,
    color: colors.textSecondary,
    marginBottom: 12,
  },
});