import React, { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import { useAppTheme } from '@theme';
import { getStyles } from './countdownTimer.styles';

interface CountdownTimerProps {
  durationSeconds: number;
  onExpire: () => void;
  color?: string;
}

export const CountdownTimer: React.FC<CountdownTimerProps> = ({
  durationSeconds,
  onExpire,
  color,
}) => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);
  const [timeLeft, setTimeLeft] = useState(durationSeconds);

  useEffect(() => {
    if (timeLeft <= 0) {
      onExpire();
      return;
    }

    const timer = setInterval(() => {
      setTimeLeft((prev) => prev - 1);
    }, 1000);

    return () => clearInterval(timer);
  }, [timeLeft, onExpire]);

  const progressColor = color || colors.primary;

  return (
    <View style={styles.container}>
      <View style={[styles.outerCircle, { borderColor: progressColor }]}>
        <Text style={[styles.timerText, { color: progressColor }]}>{timeLeft}s</Text>
      </View>
    </View>
  );
};
export default CountdownTimer;