bw-expo-app/components/profile/profile-empty-state.tsx

import { router } from 'expo-router';
import React from 'react';
import { View, TouchableOpacity } from 'react-native';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';
import { ThemedText } from '@/components/themed-text';
import { useColorScheme } from '@/hooks/use-color-scheme';

type TabKey = 'all' | 'image' | 'video';

export function ProfileEmptyState({ activeTab }: { activeTab: TabKey }) {
  const colorScheme = useColorScheme();
  const palette = colorScheme === 'dark' ? darkPalette : lightPalette;
  const copy = deriveEmptyCopy(activeTab);

  return (
    <View style={styles.emptyWrap}>
      <View
        style={[
          styles.emptyGlyph,
          {
            backgroundColor: palette.glyphBackdrop,
            borderColor: palette.border,
          },
        ]}
      >
        <MaterialIcons name="image" size={40} color={palette.accent} />
      </View>
      <ThemedText style={[styles.emptyTitle, { color: palette.textPrimary }]}>{copy.title}</ThemedText>
      <ThemedText style={[styles.emptySubtitle, { color: palette.textSecondary }]}>{copy.subtitle}</ThemedText>
      <TouchableOpacity
        activeOpacity={0.9}
        onPress={() => router.push('/(tabs)/home')}
        style={[
          styles.generateButton,
          {
            borderColor: palette.accent,
            backgroundColor: palette.elevated,
          },
        ]}
      >
        <MaterialIcons name="auto-awesome" size={18} color={palette.accent} style={styles.generateIcon} />
        <ThemedText style={[styles.generateLabel, { color: palette.accent }]}>Generate</ThemedText>
      </TouchableOpacity>
    </View>
  );
}

function deriveEmptyCopy(activeTab: TabKey) {
  if (activeTab === 'image') {
    return {
      title: 'No Images yet',
      subtitle: 'Pick a style, enter a prompt, and generate your image.',
    };
  }
  if (activeTab === 'video') {
    return {
      title: 'No Videos yet',
      subtitle: 'Pick a style, enter a prompt, and craft your first clip.',
    };
  }
  return {
    title: 'No Content yet',
    subtitle: 'Pick a style, enter a prompt, and generate your image.',
  };
}

const darkPalette = {
  textPrimary: '#F6F7FA',
  textSecondary: '#8E9098',
  glyphBackdrop: '#18181D',
  border: '#1D1E24',
  accent: '#B7FF2F',
  elevated: '#101014',
};

const lightPalette = {
  textPrimary: '#0F1320',
  textSecondary: '#5E6474',
  glyphBackdrop: '#E8EBF4',
  border: '#E2E5ED',
  accent: '#405CFF',
  elevated: '#F0F2F8',
};

const styles = {
  emptyWrap: {
    alignItems: 'center' as const,
    paddingTop: 32,
  },
  emptyGlyph: {
    width: 112,
    height: 112,
    borderRadius: 28,
    borderWidth: 1,
    alignItems: 'center' as const,
    justifyContent: 'center' as const,
    marginBottom: 24,
  },
  emptyTitle: {
    fontSize: 18,
    fontWeight: '700' as const,
    marginBottom: 6,
  },
  emptySubtitle: {
    fontSize: 14,
    lineHeight: 20,
    textAlign: 'center' as const,
    marginBottom: 28,
    paddingHorizontal: 24,
  },
  generateButton: {
    borderWidth: 1,
    borderRadius: 999,
    paddingHorizontal: 28,
    paddingVertical: 12,
    flexDirection: 'row' as const,
    alignItems: 'center' as const,
    justifyContent: 'center' as const,
  },
  generateIcon: {
    marginRight: 8,
  },
  generateLabel: {
    fontSize: 15,
    fontWeight: '700' as const,
  },
};