import React from 'react';
import { Pressable } from 'react-native';
import Svg, { Path } from 'react-native-svg';
import { getColor } from './style-utils';

interface CheckProps {
  checked?: boolean;
  disabled?: boolean;
  onPress?: () => void;
  hitSlop?: number;
}

const Check = ({
  checked = false,
  disabled = false,
  onPress,
  hitSlop = 8,
}: CheckProps) => {
  // 상태에 따른 색상 설정
  const getFillColor = () => {
    if (checked) {
      return disabled ? 'rgba(16, 185, 129, 0.5)' : getColor('emerald-500'); // 체크 상태
    } else {
      return disabled ? 'rgba(209, 213, 219, 0.5)' : getColor('gray-300'); // 체크 안된 상태
    }
  };

  return (
    <Pressable onPress={onPress} disabled={disabled} hitSlop={hitSlop}>
      <Svg width="32" height="32" viewBox="0 0 24 24" fill="none">
        <Path
          d="m16.726 7-.64.633c-2.207 2.212-3.878 4.047-5.955 6.158l-2.28-1.928-.69-.584L6 12.66l.683.577 2.928 2.477.633.535.591-.584c2.421-2.426 4.148-4.367 6.532-6.756l.633-.64L16.726 7Z"
          fill={getFillColor()}
        />
      </Svg>
    </Pressable>
  );
};

export default Check;