import React, { memo } from 'react';
import { Image, StyleSheet, View } from 'react-native';

import { useTheme } from '../../../../theme';

const LOGO = require('../../../../assets/images/logo.jpg');

/** The source file is 354x99; the lock-up keeps that ratio at any width. */
const ASPECT_RATIO = 354 / 99;

interface BrandLogoProps {
  /** Rendered width of the logo itself, excluding the plate's padding. */
  width?: number;
}

/**
 * The bank's logo, set on a white plate.
 *
 * The logo is a JPG with a white ground and no transparency, so it cannot sit
 * directly on the red brand wash — it would show as a hard-edged white box.
 * The plate makes that white deliberate: a rounded card the logo belongs to.
 * It uses `white`, not `surface`, because the logo's own ground is literal
 * white in both themes and a dark-mode surface would frame it in charcoal.
 */
const BrandLogoComponent = ({ width = 200 }: BrandLogoProps) => {
  const theme = useTheme();

  return (
    <View
      accessible
      accessibilityRole="image"
      accessibilityLabel="Apna Sahakari Bank Ltd."
      style={[styles.plate, { backgroundColor: theme.colors.white, borderRadius: theme.radius.sm }]}
    >
      <Image
        source={LOGO}
        resizeMode="contain"
        style={{ width, height: width / ASPECT_RATIO }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  plate: {
    alignSelf: 'center',
    paddingHorizontal: 10,
    paddingVertical: 6,
  },
});

export const BrandLogo = memo(BrandLogoComponent);