'use client';

import { useState } from 'react';
import { FoxIconButton } from '@fox/core/components/fox-icon-button';
import { FoxMagnifyingGlassIcon } from '@fox/core/icons';
import type { StudentMember } from '@/lib/domain/student-member';
import { StudentDetailModal } from './student-detail-modal';

interface StudentRowActionsProps {
  member: StudentMember;
}

/**
 * 목록 행의 "관리" 셀 — 조회 팝업의 열림 상태만 소유하는 최말단 상호작용 경계다(테이블 전체를
 * 클라이언트로 내리지 않기 위해 이 셀만 분리했다 — §2.4 "'use client'는 최말단에만"). 팝업에
 * 필요한 데이터는 이미 이 행이 갖고 있는 member를 그대로 전달한다(재조회 없음).
 *
 * 시안의 "돋보기 아이콘 버튼"이다. 버튼은 `components/ui/button`이 아니라 `FoxIconButton`을
 * 쓴다 — 아이콘은 스스로 크기를 갖지 않고 감싼 슬롯이 정하는데, 그 슬롯 크기를 실제로
 * 정의하는 건 @fox 쪽뿐이다(components/ui는 Tailwind 제거 이후 무스타일이다).
 */
export function StudentRowActions({ member }: StudentRowActionsProps) {
  const [isDetailOpen, setIsDetailOpen] = useState(false);

  return (
    <>
      <FoxIconButton
        type="ghost"
        size="sm"
        icon={<FoxMagnifyingGlassIcon />}
        label="조회"
        onAction={() => setIsDetailOpen(true)}
      />
      {isDetailOpen && (
        <StudentDetailModal
          member={member}
          onClose={() => setIsDetailOpen(false)}
        />
      )}
    </>
  );
}