import React from 'react';

interface Props {
  market: string;
  inTargets: boolean;
  targetPinned?: boolean;
  busy?: boolean;
  onAdd: () => void;
  onRemove: () => void;
}

const TrendSearchTargetActions: React.FC<Props> = ({
  market,
  inTargets,
  targetPinned = false,
  busy = false,
  onAdd,
  onRemove,
}) => (
  <div
    className="tsd-card-target-actions"
    role="group"
    aria-label={`${market} 투자대상`}
    onClick={e => e.stopPropagation()}
    onKeyDown={e => e.stopPropagation()}
  >
    <button
      type="button"
      className="tsd-card-target-btn tsd-card-target-btn--add"
      title={inTargets ? '이미 투자대상에 등록됨' : '가상매매 투자대상에 추가'}
      aria-label="투자대상 추가"
      disabled={inTargets || busy}
      onClick={onAdd}
    >
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
        <line x1="7" y1="2" x2="7" y2="12" />
        <line x1="2" y1="7" x2="12" y2="7" />
      </svg>
    </button>
    <button
      type="button"
      className="tsd-card-target-btn tsd-card-target-btn--remove"
      title={
        !inTargets
          ? '투자대상에 없음'
          : targetPinned
            ? '고정된 종목은 삭제할 수 없습니다'
            : '투자대상에서 제거'
      }
      aria-label="투자대상 제거"
      disabled={!inTargets || targetPinned || busy}
      onClick={onRemove}
    >
      <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" aria-hidden>
        <line x1="3" y1="3" x2="11" y2="11" />
        <line x1="11" y1="3" x2="3" y2="11" />
      </svg>
    </button>
  </div>
);

export default TrendSearchTargetActions;