import { StyleSheet, Text, View } from "react-native";
import { colors } from "../theme/colors";
import { radius, spacing } from "../theme/spacing";

export function Logo() {
  return (
    <View style={styles.container}>
      <View style={styles.mark}>
        <Text style={styles.markText}>AV.</Text>
      </View>
      <View>
        <Text style={styles.brand}>Ambérieu Vitrines</Text>
        <Text style={styles.city}>Commerces et vie locale</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    alignItems: "center",
    gap: spacing.md
  },
  mark: {
    width: 48,
    height: 48,
    borderRadius: radius.md,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: colors.primary
  },
  markText: {
    color: colors.surface,
    fontSize: 18,
    fontWeight: "900"
  },
  brand: {
    color: colors.ink,
    fontSize: 18,
    fontWeight: "900"
  },
  city: {
    color: colors.muted,
    fontSize: 12,
    fontWeight: "600",
    marginTop: 2
  }
});