import Logo from '@/assets/images/logo.png';
import { useTheme } from '@/components/ThemeContext';
import { LogOut } from 'lucide-react-native';
import { useTranslation } from 'react-i18next';
import { Image, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { useAuth } from '../AuthProvider';

export const CustomHeader = ({ logoutbtn = false }: { logoutbtn?: boolean }) => {
  const { isDark } = useTheme();
  const { t } = useTranslation();
  const { logout } = useAuth();

  return (
    <View style={[styles.container, isDark ? styles.darkBg : styles.lightBg]}>
      <View style={styles.logoWrapper}>
        <View style={styles.logoContainer}>
          <Image source={Logo} style={styles.logo} />
        </View>
        <Text style={[styles.title, isDark ? styles.darkText : styles.lightText]}>
          {t('app.name', 'InfoTarget')}
        </Text>
      </View>
      {logoutbtn && (
        <TouchableOpacity onPress={logout}>
          <LogOut color={'red'} />
        </TouchableOpacity>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.05,
    shadowRadius: 4,
    elevation: 3,
  },

  darkBg: {
    backgroundColor: '#0f172a',
    borderBottomColor: '#1e293b',
  },

  lightBg: {
    backgroundColor: '#ffffff',
    borderBottomColor: '#e2e8f0',
  },

  logoWrapper: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 12,
  },

  logoContainer: {
    width: 40,
    height: 40,
    borderRadius: 10,
    backgroundColor: 'rgba(59, 130, 246, 0.1)',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 4,
  },

  logo: {
    width: 32,
    height: 32,
    resizeMode: 'contain',
  },

  title: {
    fontSize: 20,
    fontWeight: '700',
    letterSpacing: 0.3,
  },

  darkText: {
    color: '#f8fafc',
  },

  lightText: {
    color: '#0f172a',
  },
});