import React, { useCallback, useMemo } from 'react';
import { StyleSheet, useWindowDimensions, View } from 'react-native';
import AppText from './AppText';

export const toastConfig = {
  success: ({ text1, text2 }: { text1?: string; text2?: string }) => {
    const { width: screenWidth } = useWindowDimensions();
    const scale = useMemo(() => (screenWidth < 360 ? 0.85 : 1), [screenWidth]);

    const containerStyle = useMemo(
      () => [styles.toastContainer, { padding: 10 * scale }],
      [scale],
    );

    const text1Style = useMemo(
      () => [styles.text1, { fontSize: 16 * scale }],
      [scale],
    );

    const text2Style = useMemo(
      () => [styles.text2, { fontSize: 14 * scale }],
      [scale],
    );

    const renderText2 = useCallback(() => {
      if (!text2) return null;
      return <AppText style={text2Style}>{text2}</AppText>;
    }, [text2, text2Style]);

    return (
      <View style={containerStyle}>
        <AppText style={text1Style}>{text1}</AppText>
        {renderText2()}
      </View>
    );
  },
  // boshqa turlar uchun (error, info) ham qo'shishingiz mumkin
};

const styles = StyleSheet.create({
  toastContainer: {
    width: '90%',
    backgroundColor: '#4CAF50',
    borderRadius: 8,
    paddingHorizontal: 15,
    shadowColor: '#000',
    shadowOpacity: 0.3,
    shadowRadius: 6,
    shadowOffset: { width: 0, height: 2 },
  },
  text1: {
    color: 'white',
    fontWeight: 'bold',
  },
  text2: {
    color: 'white',
    marginTop: 2,
  },
});
