import React from "react";
import { Text, View } from "react-native";
import { Image } from "expo-image";

import { useAppConfig } from "@/src/auth";
import { makeStyles } from "@/src/theme";
import { fs } from "@/src/ui";

export function Logo({ size = 28 }: { size?: number }) {
  const styles = useStyles();
  const cfg = useAppConfig();
  if (cfg.logo_url) {
    return <Image testID="app-logo" source={{ uri: cfg.logo_url }} style={{ height: fs(size) * 1.6, width: fs(size) * 6 }} contentFit="contain" />;
  }
  const [first, ...rest] = (cfg.app_name || "PLAY CHANNELS").split(" ");
  return (
    <View testID="app-logo" style={styles.row}>
      <Text style={[styles.play, { fontSize: fs(size) }]}>{first}</Text>
      {rest.length > 0 && <Text style={[styles.rest, { fontSize: fs(size) }]}>{rest.join(" ")}</Text>}
    </View>
  );
}

const useStyles = makeStyles((c) => ({
  row: { flexDirection: "row", alignItems: "baseline", gap: 6 },
  play: { color: c.brandPrimary, fontWeight: "900", letterSpacing: 1 },
  rest: { color: c.onSurface, fontWeight: "300", letterSpacing: 4 },
}));