import { Link } from 'expo-router';
import { StyleSheet, Text, View } from 'react-native';
import { getCustomerTheme, useCustomerTheme } from '../src/store/theme';

type Props = {
  title: string;
  subtitle?: string;
  backHref?: string;
  backLabel?: string;
};

export function CustomerPageHeader({ title, subtitle, backHref = '/', backLabel = 'Voltar' }: Props) {
  const { mode } = useCustomerTheme();
  const theme = getCustomerTheme(mode);

  return (
    <View style={styles.wrap}>
      <Link href={backHref as never} style={[styles.backLink, { backgroundColor: theme.surface, color: theme.textMuted, borderColor: theme.cardBorder }]}>
        {backLabel}
      </Link>
      <Text style={[styles.title, { color: theme.text }]}>{title}</Text>
      {subtitle ? <Text style={[styles.subtitle, { color: theme.textSoft }]}>{subtitle}</Text> : null}
    </View>
  );
}

const styles = StyleSheet.create({
  wrap: {
    gap: 8,
  },
  backLink: {
    alignSelf: 'flex-start',
    borderRadius: 999,
    overflow: 'hidden',
    borderWidth: 1,
    paddingHorizontal: 14,
    paddingVertical: 10,
    fontSize: 12,
    fontWeight: '800',
  },
  title: {
    fontSize: 28,
    lineHeight: 32,
    fontWeight: '900',
  },
  subtitle: {
    fontSize: 14,
    lineHeight: 21,
  },
});