import { StyleSheet } from 'react-native';
import { Spacing, BorderRadius, Theme } from '@/constants/theme';

export const createStyles = (theme: Theme) => {
  return StyleSheet.create({
    scrollContent: {
      flexGrow: 1,
      paddingHorizontal: Spacing.lg,
      paddingTop: Spacing.xl,
      paddingBottom: Spacing["5xl"],
    },
    header: {
      marginBottom: Spacing.xl,
    },
    calorieCard: {
      padding: Spacing.xl,
      marginBottom: Spacing.lg,
      borderRadius: BorderRadius.xl,
      shadowColor: theme.primary,
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.1,
      shadowRadius: 12,
      elevation: 4,
    },
    weightCard: {
      padding: Spacing.xl,
      marginBottom: Spacing.xl,
      borderRadius: BorderRadius.xl,
      shadowColor: theme.primary,
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.1,
      shadowRadius: 12,
      elevation: 4,
    },
    cardHeader: {
      flexDirection: 'row',
      alignItems: 'center',
      marginBottom: Spacing.lg,
    },
    iconContainer: {
      width: 48,
      height: 48,
      borderRadius: BorderRadius.lg,
      backgroundColor: theme.backgroundTertiary,
      justifyContent: 'center',
      alignItems: 'center',
      marginRight: Spacing.md,
    },
    calorieContent: {
      flexDirection: 'row',
      alignItems: 'baseline',
      marginBottom: Spacing.md,
    },
    weightContent: {
      flexDirection: 'row',
      alignItems: 'baseline',
      marginBottom: Spacing.md,
    },
    progressBar: {
      height: 8,
      backgroundColor: theme.backgroundTertiary,
      borderRadius: BorderRadius.full,
      overflow: 'hidden',
      marginBottom: Spacing.sm,
    },
    progressFill: {
      height: '100%',
      backgroundColor: theme.primary,
      borderRadius: BorderRadius.full,
    },
    remainingText: {
      textAlign: 'right',
    },
    quickActions: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      marginBottom: Spacing.xl,
      gap: Spacing.md,
    },
    actionButton: {
      flex: 1,
      padding: Spacing.lg,
      borderRadius: BorderRadius.xl,
      alignItems: 'center',
      shadowColor: theme.primary,
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.15,
      shadowRadius: 8,
      elevation: 3,
    },
    cameraButton: {
      backgroundColor: theme.primary,
    },
    chartButton: {
      backgroundColor: '#10B981',
    },
    aiButton: {
      backgroundColor: '#059669',
    },
    actionIconContainer: {
      marginBottom: Spacing.sm,
    },
    recentSection: {
      marginBottom: Spacing.xl,
    },
    sectionHeader: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      marginBottom: Spacing.lg,
    },
    emptyText: {
      textAlign: 'center',
      paddingVertical: Spacing["2xl"],
    },
  });
};