import { BottomSheet } from '@/aesthetics/BottomSheet';
import { Text } from '@/aesthetics/Text';
import { buttonHeight, font, radius, spacing, useColors } from '@/aesthetics/styles';
import { useStrings } from '@/common/hooks/useStrings';
import { Check, X } from 'lucide-react-native';
import { Pressable, StyleSheet, View } from 'react-native';

type CheckLoggerProps = {
  visible: boolean;
  title: string;
  onConfirm: (value: 0 | 1) => void;
  onClose: () => void;
};

export function CheckLogger({ visible, title, onConfirm, onClose }: CheckLoggerProps) {
  const c = useColors();
  const strings = useStrings();

  return (
    <BottomSheet visible={visible} onClose={onClose} title={title}>
      <View style={styles.checkRow}>
        <Pressable
          onPress={() => onConfirm(1)}
          style={[styles.checkBtn, { backgroundColor: c.success }]}
        >
          <View style={styles.checkBtnContent}>
            <Check size={20} color={c.buttonText} strokeWidth={2.5} />
            <Text style={[styles.checkBtnText, { color: c.buttonText }]}>
              {strings.userCustomLogs.yes}
            </Text>
          </View>
        </Pressable>
        <Pressable
          onPress={() => onConfirm(0)}
          style={[styles.checkBtn, { backgroundColor: c.danger }]}
        >
          <View style={styles.checkBtnContent}>
            <X size={20} color={c.buttonText} strokeWidth={2.5} />
            <Text style={[styles.checkBtnText, { color: c.buttonText }]}>
              {strings.userCustomLogs.no}
            </Text>
          </View>
        </Pressable>
      </View>
    </BottomSheet>
  );
}

const styles = StyleSheet.create({
  checkRow: { flexDirection: 'row', gap: spacing.md },
  checkBtn: {
    flex: 1,
    minHeight: buttonHeight.xl,
    borderRadius: radius.lg,
    alignItems: 'center',
    justifyContent: 'center',
  },
  checkBtnContent: { flexDirection: 'row', alignItems: 'center', gap: spacing.xxs },
  checkBtnText: { fontSize: font.md, fontWeight: '600' },
});