/**
 * Same/Different 판단 버튼 (EP/NB/MR 공용)
 *
 * 수정사항-021-3:
 *  - 버튼 크기를 다른 테스트/앱 버튼과 유사하게 축소 (min-height 48→40, font 16→14, padding 축소)
 *  - `disabled` 추가 — 버튼을 숨기지 않고 흐리게 표시해 답변 가능 시점까지 비활성(수정사항-021-3 #2)
 */
import styled from 'styled-components';

const Row = styled.div`
  display: flex;
  gap: 10px;
  margin-top: auto;
  width: 100%;

  button {
    flex: 1;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    min-height: 40px;
    transition: opacity 0.15s;
  }
  .same { background: var(--pcnt-primary); }
  .diff { background: var(--pcnt-orange); }
  button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
`;

export default function SameDiffButtons({
  onAnswer,
  disabled,
}: {
  onAnswer: (same: boolean) => void;
  disabled?: boolean;
}) {
  return (
    <Row>
      <button className="same" disabled={disabled} onClick={() => onAnswer(true)}>같음</button>
      <button className="diff" disabled={disabled} onClick={() => onAnswer(false)}>다름</button>
    </Row>
  );
}