// 이 파일이 하는 일: 흰 배경 + 둥근 모서리 + 은은한 그림자의 공용 카드 컴포넌트.
// 학습 포인트: onClick이 있으면 클릭 가능한 스타일(호버 시 살짝 떠오름)을 자동으로 붙인다.
//
// ⚠️ 접근성(a11y) — 실제로 났던 결함. 예전엔 클릭 가능한 카드가 그냥 <div onClick>이었다.
// 마우스로는 눌리지만 키보드로는 Tab 포커스도, Enter로 열기도 안 된다. 학습 문서 목록
// 전체가 이 카드라, 키보드만 쓰는 학생·스크린리더 사용자는 문서를 하나도 열 수 없었다.
// (정작 HtmlCss 강좌에서 "div onClick은 키보드로 못 누른다"고 가르치는데 우리가 어겼던 것!)
// → onClick이 있으면 button처럼 동작하게 한다: 탭 순서에 넣고(tabIndex), role을 button으로,
//   Enter·Space로도 열리게(onKeyDown). aria-label은 각 화면에서 넘겨 무엇을 여는지 알린다.
export default function Card({ children, onClick, style, ariaLabel }) {
  const interactive = Boolean(onClick);

  function handleKeyDown(event) {
    if (interactive && (event.key === 'Enter' || event.key === ' ')) {
      event.preventDefault(); // Space가 페이지를 스크롤하지 않게
      onClick(event);
    }
  }

  return (
    <div
      className={`card${interactive ? ' card-clickable' : ''}`}
      onClick={onClick}
      onKeyDown={interactive ? handleKeyDown : undefined}
      role={interactive ? 'button' : undefined}
      tabIndex={interactive ? 0 : undefined}
      aria-label={ariaLabel}
      style={style}
    >
      {children}
    </div>
  );
}
