// src/views/MyPagePanel/MyPageSub/TermsOfService/CustomTermButton.jsx

import React, { useCallback, useState } from "react";
import classNames from "classnames";
import Spotlight from "@enact/spotlight";
import Spottable from "@enact/spotlight/Spottable";
import css from "./CustomTermButton.module.less";

// 스포터블 컴포넌트 생성
const SpottableDiv = Spottable("div");

/**
 * 약관 버튼 전용 커스텀 버튼 컴포넌트
 * TButton 컴포넌트를 기반으로 하되, 약관 버튼에 최적화된 레이아웃을 제공합니다.
 */
function CustomTermButton({
  children,
  icon,
  className,
  spotlightId,
  onClick,
  onFocus,
  onBlur,
  onMouseEnter,
  onMouseLeave,
  spotlightDisabled = false,
  disabled = false,
  selected = false,
  hovered = false,
  ...rest
}) {
  const [isFocused, setIsFocused] = useState(false);

  // 클릭 핸들러
  const handleClick = useCallback(
    (e) => {
      if (disabled) {
        e.stopPropagation();
        return;
      }

      if (onClick) {
        onClick(e);
      }
    },
    [onClick, disabled]
  );

  // 포커스 핸들러
  const handleFocus = useCallback(() => {
    setIsFocused(true);

    if (onFocus) {
      onFocus();
    }
  }, [onFocus]);

  // 블러 핸들러
  const handleBlur = useCallback(() => {
    setIsFocused(false);

    if (onBlur) {
      onBlur();
    }
  }, [onBlur]);

  return (
    <SpottableDiv
      {...rest}
      className={classNames(
        css.customTermButton,
        isFocused && css.focused,
        hovered && css.hovered,
        selected && css.selected,
        disabled && css.disabled,
        className
      )}
      spotlightId={spotlightId}
      onFocus={handleFocus}
      onBlur={handleBlur}
      onClick={handleClick}
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      role="button"
      spotlightDisabled={spotlightDisabled}
    >
      <div className={css.content}>
        <div className={css.textContent}>{children}</div>
        {icon && <div className={css.iconContent}>{icon}</div>}
      </div>
    </SpottableDiv>
  );
}

export default CustomTermButton;
