import React from 'react';
import { TouchableOpacity, Text, StyleSheet, ActivityIndicator } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { colors, spacing, radii } from '../../theme';
import { useResponsive } from '../../hooks/useResponsive';

interface CheckinButtonProps {
  isCheckinIn: boolean;
  loading: boolean;
  onPress: () => void;
}

export function CheckinButton({ isCheckinIn, loading, onPress }: CheckinButtonProps) {
  const { fontSize } = useResponsive();
  return (
    <TouchableOpacity
      style={[styles.button, isCheckinIn ? styles.checkin : styles.checkout]}
      onPress={onPress}
      disabled={loading}
      activeOpacity={0.7}
    >
      {loading ? (
        <ActivityIndicator color={colors.white} />
      ) : (
        <>
          <Ionicons
            name={isCheckinIn ? 'log-in-outline' : 'log-out-outline'}
            size={24}
            color={colors.white}
          />
          <Text style={[styles.text, { fontSize: fontSize.body }]}>
            {isCheckinIn ? 'Check In' : 'Check Out'}
          </Text>
        </>
      )}
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  button: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: spacing.sm,
    paddingVertical: 14,
    paddingHorizontal: 24,
    borderRadius: radii.lg,
  },
  checkin: {
    backgroundColor: colors.success[600],
  },
  checkout: {
    backgroundColor: colors.danger[600],
  },
  text: {
    color: colors.white,
    fontWeight: '600',
  },
});