interface ManagePlanSheetContentProps {
  onClose: () => void;
  onManage: () => void;
  onRestore: () => void;
}

export const ManagePlanSheetContent = ({
  onClose,
  onManage,
  onRestore,
}: ManagePlanSheetContentProps) => {
  return (
    <div className="space-y-4">
      <header className="space-y-1">
        <h3 className="text-lg font-semibold tracking-tight text-white">PRO 관리</h3>
        <p className="text-xs text-white/62">결제/복원은 더미 동작이며 실제 연동은 하지 않아요.</p>
      </header>

      <div className="space-y-2">
        <button
          type="button"
          onClick={onManage}
          className="w-full rounded-xl border border-white/18 bg-white/[0.04] px-3 py-2 text-left text-sm text-white/84 transition-colors hover:bg-white/[0.1]"
        >
          구독 관리 열기
        </button>
        <button
          type="button"
          onClick={onRestore}
          className="w-full rounded-xl border border-white/18 bg-white/[0.04] px-3 py-2 text-left text-sm text-white/84 transition-colors hover:bg-white/[0.1]"
        >
          구매 복원
        </button>
      </div>

      <div className="flex justify-end">
        <button
          type="button"
          onClick={onClose}
          className="rounded-full border border-white/18 bg-white/[0.05] px-3 py-1.5 text-xs text-white/74 transition-colors hover:bg-white/[0.11]"
        >
          닫기
        </button>
      </div>
    </div>
  );
};