/**
 * White-label header component.
 * Displays tenant logo/name with brand colors.
 */

import React from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native';
import { useTheme } from '../themes/ThemeProvider';

interface BrandHeaderProps {
  title?: string;
  showLogo?: boolean;
  rightAction?: {
    label: string;
    onPress: () => void;
  };
}

export default function BrandHeader({ title, showLogo = true, rightAction }: BrandHeaderProps) {
  const { theme } = useTheme();

  return (
    <View style={[styles.container, { backgroundColor: theme.colors.primary }]}>
      <View style={styles.left}>
        {showLogo && theme.tenant?.logo_url ? (
          <Image source={{ uri: theme.tenant.logo_url }} style={styles.logo} resizeMode="contain" />
        ) : null}
        <Text style={[styles.title, { color: theme.colors.white }]}>
          {title ?? theme.tenant?.name ?? 'Fogbreak'}
        </Text>
      </View>
      {rightAction && (
        <TouchableOpacity onPress={rightAction.onPress} style={styles.rightButton}>
          <Text style={[styles.rightLabel, { color: theme.colors.accent }]}>
            {rightAction.label}
          </Text>
        </TouchableOpacity>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 16,
    paddingVertical: 12,
    paddingTop: 4,
  },
  left: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 10,
  },
  logo: {
    width: 32,
    height: 32,
    borderRadius: 6,
  },
  title: {
    fontSize: 20,
    fontWeight: '700',
  },
  rightButton: {
    paddingVertical: 6,
    paddingHorizontal: 12,
  },
  rightLabel: {
    fontSize: 15,
    fontWeight: '600',
  },
});