import React, { useMemo } from "react";
import { StyleSheet, Text, View } from "react-native";
import BrandMark from "./BrandMark";
import { useTheme, type AppTheme } from "../theme";

type BrandLockupProps = {
  subtitle?: string;
  variant?: "hero" | "header";
  onDark?: boolean;
};

export default function BrandLockup({
  subtitle,
  variant = "hero",
  onDark = false,
}: BrandLockupProps) {
  const theme = useTheme();
  const styles = useMemo(() => createStyles(theme, onDark), [theme, onDark]);
  const isHero = variant === "hero";
  const markColor = onDark
    ? theme.colors.brandText
    : theme.dark
    ? theme.colors.brandText
    : theme.colors.brandAccent;

  return (
    <View style={[styles.container, isHero ? styles.containerHero : styles.containerHeader]}>
      <View style={[styles.markWrap, isHero ? styles.markWrapHero : styles.markWrapHeader]}>
        <BrandMark color={markColor} size={isHero ? 44 : 24} />
      </View>
      <View style={styles.copy}>
        <Text style={[styles.title, isHero ? styles.titleHero : styles.titleHeader]}>
          Crédit Mabligop
        </Text>
        {subtitle ? (
          <Text style={[styles.subtitle, isHero ? styles.subtitleHero : styles.subtitleHeader]}>
            {subtitle}
          </Text>
        ) : null}
      </View>
    </View>
  );
}

const createStyles = (theme: AppTheme, onDark: boolean) => {
  const titleColor = onDark ? theme.colors.brandText : theme.colors.text;
  const subtitleColor = onDark ? theme.colors.brandTextMuted : theme.colors.textMuted;

  return StyleSheet.create({
    container: {
      flexDirection: "row",
      alignItems: "center",
    },
    containerHero: {
      gap: 14,
    },
    containerHeader: {
      gap: 10,
    },
    markWrap: {
      alignItems: "center",
      justifyContent: "center",
    },
    markWrapHero: {
      width: 56,
      height: 56,
      borderRadius: 18,
      backgroundColor: onDark ? theme.colors.brandSurfaceAlt : theme.colors.accentSurface,
    },
    markWrapHeader: {
      width: 36,
      height: 36,
      borderRadius: 12,
      backgroundColor: onDark ? theme.colors.brandSurfaceAlt : theme.colors.accentSurface,
    },
    copy: {
      justifyContent: "center",
    },
    title: {
      fontWeight: "800",
      color: titleColor,
    },
    titleHero: {
      fontSize: 24,
      letterSpacing: -0.5,
    },
    titleHeader: {
      fontSize: 15,
      letterSpacing: -0.2,
    },
    subtitle: {
      color: subtitleColor,
    },
    subtitleHero: {
      marginTop: 4,
      fontSize: 12,
      letterSpacing: 1.1,
      textTransform: "uppercase",
    },
    subtitleHeader: {
      fontSize: 11,
    },
  });
};
